vue组件学习三(插槽)

1、匿名插槽

父组件调用Mycomponet1组件

<Mycomponet1>
click me
</Mycomponet1>

子组件为

<button>
<slot></slot>
</button>

最后结果为

<button>click me</button>

2、渲染作用域

因为插槽的内容是在父组件中定义的，所以能访问到父组件中的数据作用域，无法访问到子组件的数据。

3、默认内容

在我们没有从父组件中提供插槽内容时，可以提供一个默认值
例如：

<button>
<slot>默认内容</slot>
</button>

在这个例子中，父组件没有提供插槽内容而使用默认内容，最后结果为

<button>
默认内容
</button>

4、具名插槽

当具有多个slot的时候，需要给每个slot加上一个名字，来指定插槽的内容放到哪个位置，
在slot有一个属性name,可以用来绑定名字
例如：

<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>

这种带名字的slot就是具名插槽，没有指定名字的会默认给name=“default”
当父组件传入插槽内容就应该通过v-slot来绑定具体的名字

<childComponent>
<template v-slot:header>
header插槽的内容
</template>
</childComponent>

简写为

<childComponent>
<template #header>
header插槽的内容
</template>
</childComponent>

完整的为

<childComponent>
<template #header>
header插槽的内容
</template>
<template #default>
main插槽的内容
</template>
<template #footer>
footer插槽的内容
</template>
</childComponent>

当具名插槽和默认插槽一起使用时，顶级的非template都会被视为默认插槽的内容，
所以还可简写为

<childComponent>
<template #header>
header插槽的内容
</template>

main插槽的内容

<template #footer>
footer插槽的内容
</template>
</childComponent>

5、条件插槽

配合$slots和v-if来使用
当某个插槽存在时才渲染

<div v-if="$slots.header">
<slot name="header"/>
</div>

6、作用域插槽

在第二点我们提到作用域的问题，无法访问到子组件的数据。
但是当我们的插槽内容确实要同时用药父子组件的数据，还是可以通过props的方法传值
父组件

<childComponent v-slot="slotProps">
{{slotProps.text}}
</childComponent>

子组件为

<script>
export default{
data(){
return {
text:'name'
}
}
}
</script>
<div>
<slot :text="text"></slot>
</div>

7、具名作用域插槽

其实就是比作用域插槽多了一个指定name的操作
注意slot上的name是一个特别保留的attributes，不会放在props中传递

<childComponent>
<template v-slot:header="headerProp">
{{headerProp}}
</template>
</childComponent>

子组件为

<div>
<slot :name="header" :text="111"></slot>
</div>

最后headerProp的值为text=“111”

最后

如果你对本文有疑问，你可以在文章下方对我留言，敬请指正，对于每个留言我都会认真查看。

原文地址：https://blog.csdn.net/weixin_47543906/article/details/145307686

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！