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>