默认插槽、具名插槽、作用域插槽

64 阅读1分钟

默认插槽

在父组件中添加元素
在组件使用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>