Vue Slot的使用及传值 && 过滤器filters的使用

slot其实就是一个模板文件，可以通过这个文件进行数据的展示以及向父组件的传值等

 

首先我们先定义一个插槽组件：slotTest.vue文件

<template>
  <div>
    <p @click="cClick">我是插槽,</p>
    <!-- 默认插槽 -->
    <slot :name1="name1"></slot>
    <!-- 具名插槽 -->
    <slot name="header" :name2="name2" >header</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name1: "默认插槽传递的值",
      name2: "具名插槽传递的值",
    };
  },
  methods: {
    cClick() {
      alert("子组件绑定事件")
    }
  },
};
</script>

<style scoped>
</style>

在父组件中 pSlot.vue中引入及使用

<template>
  <div>
    <div>
      插槽父组件
      <SlotChilder>如果不引入slot标签，我是不会进行显示的
        <!-- 接受默认插槽传递的值  v-slot="自己命名的属性" -->
        <template v-slot="defaultSlot">
          <div @click="pClick(defaultSlot)">
            {{defaultSlot.name1}}
          </div>
        </template>
        <!-- 接受具名插槽传递的值  v-slot:插槽name名称="自己命名的属性" -->
        <template v-slot:header="headerSlot">
          <div>
            {{headerSlot.name2}}
          </div>
        </template>
      </SlotChilder>
    </div>
    <div>
      <p>过滤器的使用</p>
      <p>{{age | ageSize}}</p>
    </div>
  </div>
</template>

<script>
import SlotChilder from "../components/slotTest.vue";
export default {
  components: {
    SlotChilder,
  },
  filters:{
    ageSize(value){
      if(value>20){
        return "老年人"
      }else{
        return "小屁孩儿"
      }
    }
  },
  data() {
    return {
      name: 1,
      age:18
    };
  },
  methods: {
    pClick(defaultSlot) {
      console.log(defaultSlot)
    }
  },
};
</script>

<style scoped>
</style>