前几天因为在练习React 所以耽搁了博客的更新
这几天又回顾了Vue的各种属性的用法 我发现一个跟
父子传值差不多的属性 slot 插槽属性
在vue的官方文档中
solt是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参
可以利用slot属性进行传递
通俗的理解就是
就是在组件模板中使用slot定义一个位置
在通过slot的属性进行匹配
替换组件模板中的位置
我给大家举一个例子
在App.vue 里面引入Slot.vue 子组件
<template>
<div>
<router-view />
<!-- 组件中传递 -->
<Slot>
<slot>来自父组件的Hello!word</slot>
</Slot>
</div>
</template>
<script>
import Slot from "./components/Slot";
//引入Slot 页面 展示利用插槽slot进行传值
export default {
components: {
Slot,
},
data() {
return {};
},
};
</script>
在Slot.vue中
<template>
<div>
<slot></slot>
</div>
</template>
这是利用匿名插槽来进行传递
匿名插槽
可以让组件模块化更清晰,同时复用性更高,不至于,我要一杯茶,我就要定义一个组件,我要一杯牛奶我又定义一个组件,有了插槽,我只需要定义一个杯子,要喝什么由使用的传人决定。
上述代码也叫匿名插槽,就是默认把模板全部渲染到solt中,如果需要指定渲染,就需要使用具名插槽,简单说就是起一个名字,告诉他小红该坐那儿,小明该坐那儿
具名插槽
<template>
<div>
<router-view />
<Slot>
<!-- 组件中传递 -->
<!-- 替换子组件匿名插槽 -->
<slot name="title"></slot>
</Slot>
</div>
</template>
<script>
import Slot from "./components/Slot";
//引入Slot页面 展示利用插槽slot进行传值
export default {
components: {
Slot,
},
data() {
return {};
},
};
</script>
<template>
<div>
<slot name="title">来子组件的Hello!word</slot>
<!-- 利用具名插槽的name属性来匹配 -->
</div>
</template>
<script>
</script>
元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。
(具名插槽) 组件中有多个命名的slot 插槽时,可以实现父组件对子组件的指定位置显示内容或传参