vue3的新写法和特性整理——插槽的使用

Posted yjc-vue-react-java

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3的新写法和特性整理——插槽的使用相关的知识,希望对你有一定的参考价值。

1、子组件暴露插槽的写法

<template>
  <div class="hello">
    <h1>子组件</h1>
    <h1>↓↓↓以下是默认插槽内容↓↓↓</h1>
    <slot :scope="sexEn1"></slot>
    <h1>↑↑↑以上是插槽内容↑↑↑</h1>
    <br />

    <div>{{sexEn}}</div>
    <h1>↓↓↓以下是具名插槽 sex的内容↓↓↓</h1>
    <slot name="sex" :scope="sexEn2"></slot>
    <h1>↑↑↑以上是具名插槽 sex的内容↑↑↑</h1>
  </div>
</template>

<script>
import { reactive, toRefs } from ‘vue‘;
export default {
  setup(a,b) {
    console.log(b);
    const state = reactive({
      sexEn1: ‘femeal‘,
      sexEn2: ‘meal‘,
      age: 23
    });
    return {
      ...toRefs(state)
    };
  },
  name: ‘AgeAndSex‘
};
</script>

<style scoped>
.hello {
  margin: 20px;
  color: green;
  border: 1px solid green;
}
.pointer {
  cursor: pointer;
}
</style>

  
2、父组件使用插槽的写法

<template>
  <div class="about">
    <AgeAndSex>
      <template v-slot="obj">
        <div class="slot">父组件使用插槽反显sexEn1:{{obj.scope}}为{{filter(obj.scope)}}</div>
      </template>
      <template v-slot:sex="obj">
        <div class="slot">父组件使用插槽反显sexEn2:{{obj.scope}}为{{filter(obj.scope)}}</div>
      </template>
    </AgeAndSex>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { reactive, toRefs } from ‘vue‘;
import AgeAndSex from ‘@/components/AgeAndSex‘;
export default {
  setup() {
    let filter = e => {
      console.log(e);
      switch (e) {
        case ‘meal‘:
          return ‘男‘;
        case ‘femeal‘:
          return ‘女‘;
        default:
          return ‘保密‘;
      }
    };
    return {
      filter
    };
  },
  filters: {},
  components: { AgeAndSex }
};
</script>
<style scoped>
.slot {
  color: red;
}
</style>

  效果图

技术图片

 

 

3、顺带一提:在vue3中,已经废除了管道符(过滤器)的功能,官方提出使用计算属性的解决方案。如果复用性不高,也可以在setup中写方法,或者写在工具函数里(我个人想法是挂载到window上,然后在setup中的返回值中解构)


以上是关于vue3的新写法和特性整理——插槽的使用的主要内容,如果未能解决你的问题,请参考以下文章

具名插槽作用域插槽的新写法

Vue3.0 的新特征 | Vue3.0 面试题总结

vue3的新特性

查漏补缺!全面总结Vue3.0的新特性(收藏)

简单对比vue2.x与vue3.x响应式及新功能

vue2升级vue3:Vue2/3插槽——vue3的jsx组件插槽slot怎么处理