__401 插槽

1.匿名插槽

const Button = {
        // slot 设置要替换的内容，组件在渲染的时候如果设置内容就会替换，如果没有设置就使用slot的数据
        // 没有添加名称的slot 叫匿名插槽
         // 设置名称的插槽叫做 具名插槽

        template: `
          <div>
            <slot>
              匿名插槽
            </slot>  
          </div>
        `,
      };

      new Vue({
        el: "#app",
        data: {
          msg: "hello vue",
        },
        components: {
          MyButton: Button,
        },
      });

 <div id="app">
      <my-button></my-button>
 </div>

‍

2.具名插槽

const Button = {
  // slot 设置要替换的内容，组件在渲染的时候如果设置内容就会替换，如果没有设置就使用slot的数据
  // 设置名称的插槽叫做 具名插槽
  template: `
    <div>
      <slot name="left">
        left
      </slot>  
      <slot name="middle">
        middle
      </slot>
      <slot name="right">
        right
      </slot>
    </div>
  `,
};

new Vue({
  el: "#app",
  data: {
    msg: "hello vue",
  },
  components: {
    MyButton: Button,
  },
});

 <div id="app">
  <my-button class="box">
    <template slot="left">图标</template>
    <template slot="middle">
      <input type="text" />
    </template>
    <template slot="right">
      <button>确认</button>
    </template>
  </my-button>
</div>

‍

3.作用域插槽

const Button = {
  // slot 
  template: `
   <div>
        <h1>子组件</h1>
    <slot :mj="'九阳真经'">
    </slot>
  </div>
  `,
};

new Vue({
  el: "#app",
  data: {
    msg: "hello vue",
  },
  components: {
    MyButton: Button,
  },
});

 <div id="app">
  <my-button class="box">
     <template slot-scope="obj"> {{ obj.mj }} </template>  // 九阳真经
  </my-button>
</div>

‍

4.插槽的优点

1.可以在父组件定制子组件的 ui

2.可以解决多层组件传参问题

3.可以对组件进行抽离，方便管理

‍

5.v-slot vue2.6+写法

- v-slot:具名 具名插槽写法, 简写：#具名

- v-slot:default 匿名插槽写法，简写：#default

v-slot:default="slotProps" 简写：#default="slotProps"

const Button = {
  // slot 设置要替换的内容，组件在渲染的时候如果设置内容就会替换，如果没有设置就使用slot的数据
  // 设置名称的插槽叫做 具名插槽
  template: `
    <div>
      <slot name="left">
        left
      </slot>  
      <slot name="middle">
        middle
      </slot>
      <slot name="right">
        right
      </slot>
    </div>
  `,
};

new Vue({
  el: "#app",
  data: {
    msg: "hello vue",
  },
  components: {
    MyButton: Button,
  },
});

 <div id="app">
  <my-button class="box">
    <template v-slot:"left">图标</template>
    // 具名插槽 # 写法 v-slot 写法
    <template #"middle">
      <input type="text" />
    </template>
    <template v-slot:"right">
      <button>确认</button>
    </template>
  </my-button>
</div>

‍

- v-slot:mj='mj' 作用域插槽写法

<div>
<h1>子组件</h1>
<slot :mj="'九阳真经'"></slot>
</div>

<child>
  <template v-slot:default="slotProps">
    {{slotProps.mj}}  // 九阳真经
  </template>
</child>

‍

‍