根据官方文档总结以下几点:
1、插槽内容
组件<slot-content>，添加a标签、链接地址，然后在里面放置了标签<slot>。在父组件中引用<slot-content>组件。并在组件上设置url属性，在标签内添加了文字。
<template>
<a :href="url">
<slot></slot>
</a>
</template>
<script>
<template>
<div class="hello">
<slot-content url="http://ww.baidu.com">跳转百度</slot-content>
</div>
</template>
<script>
import slotContent from "./slotConent";
export default {
name: "HelloWorld",
components: {
slotContent
}
};
</script>
可以看到子组件里子组件中href变为了百度地址，并将文字也呈现了出来，,官方文档说明如果子组件没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。如果<slot>存在内容，则该组件其实标签和结束标签之间的内容会替换<slot>中内容
2、后备内容
该组件起始标签和结束标签之间有内容，那么就会替换原有组件中内容，如果没有内容则显示后备(默认)内容。添加了<slot-button>组件，添加了以下内容。
<template>
<button>
<slot>提交</slot>
</button>
</template>
在这里我将两种情况都给写了
<template>
<div class="hello">
<slot-button></slot-button>
<!-- 当在字组件闭合标签钱添加了内容，则会替换原有的内容 -->
<slot-button>保存</slot-button>
</div>
</template>
<script>
import slotButton from "./button";
export default {
name: "HelloWorld",
components: {
slotButton
}
};
</script>
来看看结果,可以看到第一个按钮我没有修改内容，他会显示默认内容，第二个我修改了则会替换原有内容，这就是后备内容。
3、具名插槽
有时我们需要多个插槽，例如对于一个网站包含了页头、内容、页尾。我们在开发每个页面的时候不可能每次都将页头页尾进行重写.
<template>
<div>
<header>
<!-- 我希望把页头放这里 -->
<slot name="header"></slot>
</header>
<main>
<!-- 我希望把内容放这里 -->
<slot></slot>
</main>
<footer>
<!-- 我希望把页尾放这里 -->
<slot name="footer"></slot>
</footer>
</div>
</template>
这种如何实现呢，具有多个插槽。如果你仔细看代码的话，你会发现<slot>有一个特殊的特性：name。未定义name属性，那么<slot>的name会默认为default。
<template>
<div class="hello">
<layout>
<template v-slot:header>这是header</template>
<div>这是内容1</div>
<div>这是内容2</div>
<div>这是内容3</div>
<template #footer>这是footer</template>
</layout>
</div>
</template>
<script>
import layout from "./layout";
export default {
name: "HelloWorld",
components: {
layout
}
};
</script>
具有特殊的插槽可以用v-slot:标记的name名称来识别内容插入到指定的区域里。官方也提供了简写,例如#footer.来看看效果
#####4、作用域插槽
组件<slot-scope>,定义了对象data,将通过绑定值方式传递给父组件。而作用域插槽的关键作用就在 来自子组件在<slot>标签绑定的值 可以通过<v-slot>获取。
``` js
<template>
<div class="slot-scope">
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
name: "slotScope",
data() {
return {
data: [
{
name: "测试1",
id: 1
},
{
name: "测试2",
id: 2
},
{
name: "测试3",
id: 3
}
]
};
}
};
</script>
<template>
<div class="hello">
<!-- 这里可以直接在组件上获取值 -->
<slotScope v-slot:default="slotData">
<div v-for="item in slotData.data" :key="item.id">
<ul>
<li>{{item.name}}</li>
</ul>
</div>
</slotScope>
</div>
</template>
<script>
import slotScope from "./slotScope";
export default {
name: "HelloWorld",
components: {
slotScope
},
return() {}
};
</script>
5、动态插槽名
在vue6.2 新出了指令动态参数，我声明attributeName为"href",url为百度地址。那么在a标签里 动态参数是以"[]"将参数名给包起来，这样在网页中就会被替换为"<a href="http://www.baidu.com">百度</a>"
<template>
<div class="hello">
<slotScope>
</slotScope>
<a :[attributeName]="url">百度</a>
</div>
</template>
<script>
import slotScope from "./slotScope";
export default {
name: "HelloWorld",
components: {
slotScope
},
data() {
return {
attributeName: "href",
url: "http://www.baidu.com"
};
}
};
</script>
