默认插槽
在父组件中添加元素
在组件使用slot标签觉得父组件中添加的元素的位置
例子:
在父组件里引入使用子组件:
<子组件>
<img />
</子组件>
在子组件里使用
<slot></slot>标签来定位<img />元素的位置
具名插槽
<slot>里添加name属性
<slot name='xx'>
父组件的<img />标签里添加slot属性
属性值为slot里面name的属性值,这样就能实现使用多个插槽
<img slot='xx' />
作用域插槽
数据在子组件里,通过插槽让使用该组件的组件能够得到数据
例子:
子组件:<slot :xx='xx'></slot> xx数据名
父组件:在需要获取数据的元素外面用template包裹
<template scope='xx'> slot-scope 可以换成- scope
{{xx.xx}}使用数据
</template>