Vue 插槽学习

插槽

插槽可以让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式 。主要分为默认插槽、具名插槽、作用域插槽

默认插槽
在子组件的模板内添加slot,内部放默认内容，相当于申请了一块位置，有了位置以后，组件标签内的内容就可以填充到默认位置当中。
子组件

<template>
  <div class="test">
    <div class="father">
        我是子组件文字
    </div>
    <slot></slot>
  </div>
</template>

父组件

<template>
<div id="app">
     <div>我是父组件文字</div>
     <Vuetest>插槽默认添加文字</Vuetest>
</div>
</template>

效果图

具名插槽
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

<template>
  <div class="test">
    <div class="father">
        我是子组件文字
    </div>
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="name1"></slot>
  </div>
</template>

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

<template>
<div id="app">
     <div>我是父组件文字</div>
     <Vuetest>
      <div>插槽默认添加文字</div>
      <template slot="name1">
            <p>我是具名插槽添加内容</p>
      </template>
     </Vuetest>
</div>
</template>

效果图

作用域插槽
作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

子组件存放一个带数据的插槽

<template>
  <div class="test">
    <div class="father">
        我是子组件文字
    </div>
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="name1"></slot>
    <!-- 作用插槽 -->
    <slot :data="data"></slot>
  </div>
</template>

<script>
export default {
    name:'footer1',
    data(){
      return{
      data:['111','222','333']
      }
    }

}
</script>

父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容

<div id="app">
     <div>我是父组件文字</div>
     <Vuetest>
      <template slot-scope="user">
        <div>{{user.data}}</div>
      </template>
     </Vuetest>
</div>
</template>

结果图

.native修饰符通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加.native’事件是无法触 发的。