插槽

1.普通插槽

<acomp>你好呀</acomp>
 <acomp></acomp>
 
 
   Vue.component("acomp", {
        //插槽  占位符
        //slot  vue封装的标签
        template: `
            <div>
    acomp占位:<slot></slot> <slot></slot></div>
            `,
      });

具名插槽 /命名插槽

 Vue.component("bcomp", {
        template: `<div> bcomp占位:<slot name="a"></slot> <slot></slot></div>`,
      });
      
      <bcomp v-slot="a">
        <template>
          <div>Steam,Steam,Steam</div>
        </template>
      </bcomp>

      

作用域插槽 只作用于当前命名的插槽

<ccomp>
        <template v-slot:msl="items">
          <div>
            {{items}}
            <div>{{items.name1}}--{{items.age1}}--{{items.sex1}}</div>
          </div>
        </template>

        <template v-slot:zcs="items">
          <div>{{items}}</div>
        </template>
      </ccomp>
      
      
        Vue.component("ccomp", {
        template: `
        <div>ccomp站位:<slot name="zcs"></slot><slot name="msl" :name1="name" :age1="age" :sex1="sex"></slot></div>
        
        `,
        data() {
          return {
            name: "张三",
            age: 21,
            sex: "男",
          };
        },
      });