2021-10-28 vue笔记-组件化开发(六) 插槽(slot):匿名插槽,具名插槽和作用域插槽

0.定义

1.特性

提高组件的重用能力

2.理解

插槽就是在子组件中挖个坑,坑内内容由父组件决定,用<slot></slot>来表示

3.分类

匿名插槽:没给插槽slot起名字
具名插槽:给slot起名字(定义具名插槽:使用到name特性)
作用域插槽:本质是携带信息的匿名插槽

1.匿名插槽

例子

  <div id="app">
      <header1>官网</header1>
      <p>我是正文</p>
  </div>
  <script>
      Vue.component('header1', {
          template: `<div>我是<slot></slot>的header</div>`
      });
      var vm = new Vue({
          el: "#app"
      });
  </script>

结果

我是官网的header
我是正文

2.具名插槽

子组件把多个插槽放置在不同地方,父组件根据插槽名字填充对应内容

例子:

    <div id="app">
        <view1>
            <div>商品参数</div>
            <div><img src="https://ftp.bmp.ovh/imgs/2021/05/b86a125cadd68fb3.png" alt=""></div>
            <div slot="header">我是头部</div>
            <div slot="footer">我是底部</div>
        </view1>
    </div>
</body>
<script>
    Vue.component('view1', {
        // 具名插槽:对slot起名字
        template: `
          <div>
              <header>
               <slot name="header"></slot>
             </header>
              <main>
                  <slot></slot>
              </main>
              <footer>
                  <slot name="footer"></slot>
              </footer>
            </div>
        `
    });
    var vm = new Vue({
        el: "#app"
    });
</script>

结果

3.作用域插槽

可以携带数据:子组件提供数据,父组件提供样式

例子

<div id="app">
    <header1>
        <div slot-scope="df">
            <h1>查询书籍:{{df.info}}</h1>
        </div>
    </header1>
</div>
<script>
    Vue.component('header1', {
        // 作用域插槽:本质是一个携带信息的匿名插槽
        data() {
            return {
                book: 'javascript从入门到精通'
            }
        },
        template: `
    <div><slot :info="book"></slot>,剩余馆藏:2</div>
    `
    });
    var vm = new Vue({
        el: "#app"
    });
</script>

结果:

4.vue2.6.0之后的重大更新

4.1.匿名插槽==>没有改变
4.2.具名插槽

• v-slot取代slot属性,且可以简写为"#"

更新前:
父组件:<template slot="slotName">content</template>
子组件:<slot name="slotName"></slot>

更新后:
父组件:<template v-slot=:slotName">content</template>,可以简写为<template #slotName></template>
子组件:<slot name="slotName">

4.3.作用域插槽

• v-slot:slotName="obj"取代slot-scope=“obj”

更新前:
父组件:<template slot="slotName" slot-scope="obj"></template>
子组件:<slot name="slotName" :anyName="data"></slot>

更新后:
父组件:<template v-slot:slotName="obj"></template>
子组件:<slot name="slotName" anyName="data"></slot>

4.4.总结
vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。
但是将会在vue 3 中，被废弃的这两个，不会被支持即无效。