vue slot-scope 插槽的使用

我看到其他博主写的一篇非常好的文章 ：传送门

参考上述代码的一些心得说明

源代码

```go
<template lang="">
  <div>
    <h3>这是父组件</h3>
    <son>
      <template slot="myslot" slot-scope="scope">
        <ul>
          <li v-for="item in scope.data">{
    
    {
    
    item}}</li>
        </ul>
      </template>
    </son>
  </div> 
</template>

<template>
  <div>
    <h4>这是子组件</h4>
    <input type="text" placeholder="请输入">
    <slot name="myslot" :data='list'></slot>
  </div>
</template>
 
<script>
  export default {
    
    
    name:'Son',
    data(){
    
    
      return{
    
    
        list:[
          {
    
    name:"Tom",age:15},
          {
    
    name:"Jim",age:25},
          {
    
    name:"Tony",age:13}
        ]
      }
    }
  }
</script>

效果图

说明

父组件的slot根据子组件的name="myslot’进行插槽使用。 使用方法： slot="myslot"

slot-scope="scope " 是在接受子组件绑定的值 使用方法 scope.data， 而子组件<slot name="myslot" :data='list'>绑定list的数值以及定义自己slot的name

侵删