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

本文链接：https://blog.csdn.net/rowlet/article/details/121022103

文章目录

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>