Vue v-slot:markname

　　slot

　　　　1.作用：使父组件向子组件插入html结构，也是组件间通信的一种方式，父组件===>自组件；

　　　　2.分类：默认插槽、具名插槽、作用域插槽；

　　　　3.使用方式：

　　　　　　1.默认插槽：　　　　　　　　

父组件：
    <Category>
      <div>html结构</div>
    </Category>
子组件：
    <template>
        <div>
            <!-- 定义插槽 -->
            <slot>插入默认内容</slot>
        </div>
    </template>

　　　　　　2.具名插槽：

父组件：
    <Category>
      <template slot="mark1">
        <div>html结构</div>
      </template>
      <template v-slot:mark2>
        <div>html结构2</div>
      </template>
    </Category>
子组件：
    <template>
      <div>
        <!-- 定义插槽 -->
        <slot name='mark1'>插入默认内容</slot>
        <slot name='mark2'>插入默认内容</slot>
      </div>
    </template>

　　　　　　3.作用域插槽：

　　　　　　　　1.数据在组件的自身，根据生成的结构需要组件的使用者来决定

　　　　　　　　

　　　　　　　　2.编码：

父组件：
    <Category>
      <template scope="scopeData">
        <!-- ul list  -->
        <ul>
          <li v-for="item in scopeData.listdatas" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </template>

      <template slot-scope="scopeData">
        <!-- h4 title  -->
        <h4 v-for="item in scopeData.listdatas" :key="item.id">
          {{ item.name }}
        </h4>
      </template>
    </Category>

子组件：
    <template>
      <div>
        <!-- 定义插槽 -->
        <slot :listdatas="listdatabase">插入默认内容</slot>
      </div>
    </template>


<script>
export default {
  //数据在子组件自身
  data() {
    return {
      listdatabase: {id:["1", "2", "3"],name:{"a","b","c"}},
    };
  },
};
</script>