内容分发的工具
1.匿名插槽
//compontent
<template>
<div class="slot">
<slot></slot>
</div>
</template>
// parent
<slotComponten>
内容
</slotComponten>
//效果 组件的slot展示得就是 “ 内容”
2.具名插槽
//compontent
<template>
<div class="slot">
<slot></slot>
<br />
<slot name="content"></slot>
</div>
</template>
//parent
<slotHasName>
<template v-slot:default>
具名插槽 默认
</template>
<template v-slot:content>
插槽名内容
</template>
</slotHasName>
效果:
具名插槽 默认
插槽名内容
3.作用域插槽
//parent 这里obj 和foo 在父组件中都没有
<slotArea>
<template v-slot:default="obj">{{ obj.foo }}</template>
</slotArea>
//component
<template>
<div class="slot">
<slot :foo="foo"></slot>
</div>
</template>
<script>
export default {
name: "slotArea",
data() {
return { foo: "子组件的数据" };
}
};
</script>
//效果
子组件的数据
正常来说foo 在parent中是访问不到的,foo是component中的数据,但是{{ obj.foo }}是在parent中渲染的,为了让foo在parent可以被访问,将foo作为component的属性绑定上去 可以取到obj 为一个对象 里面有component绑定的数据foo ,通过obj.foo取到了值,并展示出来。