Vue组件开发2——slot插槽

最新推荐文章于 2024-07-10 18:26:38 发布

chemmhi

最新推荐文章于 2024-07-10 18:26:38 发布

阅读量171

点赞数 1

文章标签： html vue.js css es6 html5

本文链接：https://blog.csdn.net/chemmhai/article/details/118532871

版权

本文探讨了Vue组件中slot插槽的使用，解释了为何需要slot来实现内容分发，并通过实例介绍了基础插槽如何指定默认值。

摘要由CSDN通过智能技术生成

为什么要用slot插槽？

我们在开发组件时，往往不能对组件的所有内容全部写死，因为写死会降低组件的复用性。所以引出了slot插槽的理念，正如生活中的插槽一样，如电脑的USB插槽等等，为电脑拓展了键盘，鼠标，移动硬盘等部件，提高了电脑的可用性。
在开发组件的时候可以给组件提供插槽，来提高组件的复用性。Vue的插槽主要有三种：一是基础插槽。二是具名插槽。三是作用域插槽。下面对三种插槽分别进行介绍：

1. 基础插槽的使用

<div id="app">
    <cpn>     //在使用组件的时候，给插槽赋值，注意组件标签中所有的值都会赋值给插槽
      <button>标题</button>
      <button>标题2</button>
    </cpn>
  </div>
  <template id="cpn1">
    <div>
      <span>左边</span>
      <slot></slot>      //预留了一