本节知识点

插槽slot
作用域插槽比如li options 等等

(一)插槽使用场景

父组件给子元素发送数据除了props 还能用插槽
子组件想渲染出来父元素给子元素的html代码,必须就需要插糟了

(二) 使用方法

(1)没有传值，没有默认值

<body>
  <div id="app">
    <zujian1>
      <p>插入的内容</p>
    </zujian1>
  </div>
</body>
<script>
  let zujian1 = {
    template: '<div><p>没插入内容</p><slot></slot></div>',

  }
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!"
    },
    components: {
      zujian1
    }
  })
</script>

这样页面渲染的结果就是

6.jpg

(2)有默认值


<body>
  <div id="app">
    <zujian1>

    </zujian1>
  </div>
</body>
<script>
  let zujian1 = {
    template: '<div><p>没插入内容</p><slot>这个就是默认内容</slot></div>',

  }
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!"
    },
    components: {
      zujian1
    }
  })
</script>

渲染后的结果就是

7.jpg

(3) 多个插槽


<body>
  <div id="app">
    <zujian1>
      <header class="header" slot="header">这个就是头部</header>
      <footer class="footer" slot="footer">这个就是脚步</footer>
    </zujian1>
  </div>
</body>
<script>
  let zujian1 = {
    template: `<div>
    <slot name="header"></slot>
    <p class="content">content</p>
    <slot name="footer"></slot>
    </div>`,

  }
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!"
    },
    components: {
      zujian1
    }
  })
</script>

8.jpg

作用域插糟

作用域插糟必须以template作为包裹层


<body>
  <div id="app">
    <zujian1>
      <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
    </zujian1>
  </div>
</body>
<script>
  let zujian1 = {
    data() {
      return {
        list: [1, 2, 3, 4]
      }
    },
    template: `<div>
      <ul>
        <slot v-for="(item,index) in list" :item="item">{{item}}</slot>
      </ul>
    </div>`,

  }
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!"
    },
    components: {
      zujian1
    }
  })
</script>