vue slot-scope v-slot原理及用法

一直以来觉得这个vue slot-scope很神奇
如果我们写的自定义组件，应该如何利用这个slot-scope功能呢？

Home.vue父组件

<template>
  <div class="home">
    <test :fadata="user">
      <template v-slot:bar>
        <span>Hello</span>
      </template>
      <!-- 新写法 -->
      <!-- <template v-slot:foo="cc">
          <span>asdfasdf--{{cc}}</span>
        </template> -->
      <!-- 旧写法 -->
      <div slot="foo" slot-scope="slotProps">asdfasdf--{{ slotProps }}</div>
    </test>
  </div>
</template>

<script>
import test from "@/components/test.vue";

export default {
  name: "Home",
  components: {
    test,
  },
  data() {
    return {
      user: "sfsf我的props",
    };
  }
};
</script>

test.vue子组件

<template>
  <div>
    <slot name="bar"></slot>
    <!--:data="fadata"这个是关键 -->
    <slot name="foo" :data="fadata">
    </slot>
  </div>
</template>

<script>
export default {
 name: "test",
 props:{
   fadata:{
     type: String,
     default: 'zi-default'
   }
 },
 created(){
    console.error('---fa:----:',this.fadata);
  },
  data() {
    return {
      msg: "World",
    };
  },
}
</script>

<style>

</style>

就是这么用的，有问题可以微信我号yizheng369