Vue组件化之插槽

slot插槽的基本使用

类似电脑的usb，使用接口给电脑增加不同的功能，键盘/音响，而不是直接在组件里添加

介绍：
默认自定义标签内不允许添加内容，而插槽可以让我们在内部添加内容

封装方法：
抽取共性，保留不同。

使用方法：

1. 直接在template中插入slot空标签，即可在自定义标签中插入内容，内容会自动替换空slot
   
2. 组件标签中插入的无论插入多少值，都会一起作为替换元素替换slot
3. 如果在slot中添加默认值，组件标签中没有插入内容则显示默认值
   默认显示我

具名插槽slot

当有多个插槽时，我们只想替换其中一个，就需要用到具名插槽了

    <cpn>
        <span slot='mysolt'>我替换了myslot</span>
    </cpn>
    <slot name='myslot'>myslot</slot>
    <slot name='newslot'>newslot</slot>

编译作用域

父组件模板的所有东西都会在父级作用域内编译；
子组件模板的所有东西都会在子级作用域内编译。

通俗点讲：看标签的父组件，标签是在父组件中实现的，
那么作用域就是父组件，属性也是父组件的属性

<div id="app">
  //它的父组件是vue实例，
  所以属性也是vue实例中的属性，和自定义组件无关
  <cpn v-show="isShow"></cpn>
</div>

插槽作用域

• 在插槽中只能引用组件的data。
• vue实例中的插槽是父组件，因为作用域的原因不能直接引用

在父组件中拿到子组件的数据可以通过如下方法

1. 在slot标签属性中命名key并动态绑定父组件data

    <template id="cpn">
      <div>
        <slot :newdata="message"></slot>
      </div>
    </template>

1. 在vue实例中通过template接收(两种方式)
   1. 通过v-slot接收 (建议用v-slot)

    <cpn>
        <template v-slot={newdata}>
          <h2>{{newdata}}</h2>
        </template>
    </cpn>

   1. 通过slot-scope接收

    <cpn>
      <template slot-scope=newname>
          <h2>{{newname.newdata}}</h2>
      </template>
    </cpn>

插槽高级技巧

我们都知道当使用插槽时，自定义标签中的内容会替换插槽。但我们想要给插槽设置样式该怎么做呢?

使用div包裹插槽，给div设置样式，利用cs继承特性，被替换的插槽也就有了样式

  <template id="cpn">
    <div>
      <!-- 在组件data中动态设置class -->
      <div :class="{active:isActive}">
       <slot></slot>
      </div>
    </div>
  </template>