插槽
匿名插槽:
在注册的父组件:
<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>