0
点赞
收藏
分享

微信扫一扫

vue-插槽

内容分发的工具

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取到了值,并展示出来。

 



举报

相关推荐

0 条评论