vue之slot插槽

vue之slot插槽

slot的作用:

假如父组件需要在子组件内放一些DOM元素，默认情况下是不会显示的，如下图所示，页面并没有显示父组件增加的< span>子组件内DOM元素</ span> 元素内容。那么要加DOM元素到子组件上，这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方

<div>
  <children>  
    <span>子组件内DOM元素</span>  
    <!--上面这行不会显示-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>显示子组件</h1>"  
       }  
     }  
  });  
</script>  

结果：

显示子组件

用slot显示子组件内DOM元素

<div id="app">  
  <children>  
    <span>子组件内DOM元素</span>  
    <!--上面这行会显示在 “我是子组件” 数据后面-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>显示子组件</h1><slot></slot>"  
       }  
     }  
  });  
</script>  

结果：

显示子组件
子组件内DOM元素

具名插槽

将父组件添加的HTML标签放在子组件里的不同位置。具名插槽实现：先在子组件对应分发slot标签里，添加name=”name名” 属性，其次父组件在要分发的标签里添加 slot=”name名” 属性，然后就会将对应的标签放在对应的位置了。

简单理解就是：给子组件占的每一个坑取名，将父组件添加的HTML元素添加到指定名字的坑，就实现了分发内容在不同位置显示

【Child组件模板】

<template>
  <div>
    <slot name="header"></slot>
    <h1>子组件</h1>
    <slot name="footer"></slot>
  </div>
</template>

【父组件引用Child组件】

 <Child>
      <span slot="header">header</span>
      <span slot="footer">footer</span>
    </Child>

结果：

header
子组件
footer

编辑作用域

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

【Child组件模板】

<template>
  <div>
    <slot name="header"></slot>
    <h1>{{msg}}</h1>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '子组件里面的内容'
    }
  }
}
</script>

【父组件引用Child组件】

<template>
  <Child>
    <span slot="header">header</span>
    <h1>{{msg}}</h1>
    <span slot="footer">footer</span>
  </Child>
</template>
<script>
export default {
  data() {
    return {
      msg: '父组件的内容'
    }
  }
}
</script>

结果：

header
子组件的内容
父组件的内容
footer

解构slot-scope

在子组件中插槽中通过：data绑定了数据，父组件可以通过slot-scope="name"来取得子组件作用域插槽：data绑定的数据，name的名称可以随便取，用来定义对象来代替取到的data数据。

【Child组件模板】

<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: ['apple','banana','orange','pear']
    }
  }
}
</script>

【父组件引用Child组件】

  <template>
    <!-- 循环数据列表 -->
    <Child>
      <div slot-scope="msg">
        <span v-for="item in msg.data">{{item}} </span>
      </div>
    </Child>
 
    <!-- 直接显示数据 -->
    <Child>
      <div slot-scope="msg">
        <span>{{msg.data}} </span>
      </div>
    </Child>
 
    <!-- 不使用其提供的数据, 作用域插槽退变成匿名插槽 -->
    <Child>
      <div>插槽</div>
    </Child>
  </template>

结果：

apple banana orange pear
['apple','banana','orange','pear']
插槽

参考文章：https://blog.csdn.net/qq_38128179/article/details/85273522