码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-11-04 18:41:55      阅读:20      评论:0      收藏:0      [点我收藏+]

标签:方案   filter   lint   计算属性   OLE   one   功能   about   efault   

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的新写法和特性整理——六、插槽的使用

标签:方案   filter   lint   计算属性   OLE   one   功能   about   efault   

原文地址:https://www.cnblogs.com/yjc-vue-react-java/p/13876723.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!