二十二、插槽（slot）

组件的插槽

• 组件的插槽时为了让我们封装的组件更加具有扩展性
• 让使用者可以决定组件内部的一些内容到底展示什么

■如何去封装这类的组件

• 它们也很多区别,但是也有很多共性。
• 如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
• 但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字等等。

■如何封装合适，抽取共性,保留不同。

• 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
• 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
• 是搜索框,还是文字,还是菜单。由调用者自己来决定。

1. 插槽的基本使用：<slot></slot> 2. 插槽的默认值：<slot>button<slot> 3. 如果有多个值，同时放入到组件进行替换时，一起作为替换元素

    <!-- 
      1.插槽的基本使用：<slot></slot>
      2.插槽的默认值：<slot>button<slot>
      3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
     -->
    <div id="app">
      <my_con><button>按钮</button></my_con>
      <my_con><span>哈哈哈</span></my_con>
      <my_con>
        <i>呵呵呵</i>
        <div>我是div元素</div>
        <p>我是p元素</p>
      </my_con>
      <my_con></my_con>
      <my_con></my_con>
    </div>

    <template id="cpnC">
      <div>
        <p>我是组件<i>我是组件，哈哈哈</i></p>
        <!-- 预备插槽 -->
        <slot><button>按钮</button></slot>
      </div>
    </template>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "Hellow World"
        },
        components:{
          my_con: {
            template: "#cpnC"
          },
        }
      });
    </script>

　　

标签：slot,二十二,封装,插槽,元素,共性,组件,替换
来源： https://www.cnblogs.com/wangshunyun/p/16118727.html