首页 > 其他分享> 文章详细

二十二、插槽（slot）

2022-04-08 18:01:30 阅读：175 来源： 互联网

标签：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

二十二、插槽（slot）