vue 插槽

插槽

匿名插槽：

在注册的父组件：
 <div>
 	 //子组件
     <child>
     	<tempalte>
			<div>
				插槽显示的内容
			</div>
		</template>
     </child>
 </div>
子组件：
<div>
	<slot></slot>
</div> 

具名插槽 ：

需要多个插槽时，可以利用 元素的一个特殊的特性：name来定义具名插槽

在注册的父组件：
<div>
	<child>
  		<template v-slot="header">
			<div>
				插槽显示的内容
			</div>
		</template>
	</child>
</div>
子组件：
 <div>
    <slot name="header"></slot>
 </div>

作用域插槽

作用域插槽，主要是为了在父组件中访问子组件中的数据而提出来的一种方案，
子组件可以通过插槽的方式传值给父组件

子组件传：

<div>
   <slot name="action" :msg='msg'></slot>
</div>

 data () {
     return {
       msg: '我是子组件的数据'
     }
   },

父组件接收：
scope代表整个作用域插槽，是一个形参.

<child>
   //scope代表整个作用域插槽 是一个对象，scope返回的值是slot标签上返回的所有属性值。
   //v-alot等同于#
      <template v-slot:action='scope'>
        {{scope.msg}}
      </template>
 </child>