vue中插槽上手使用
Posted 嘴巴嘟嘟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中插槽上手使用相关的知识,希望对你有一定的参考价值。
什么是插槽
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>
表示,父组件可以在这个占位符中填充任何模板代码,如 html、组件等,填充的内容会替换子组件的<slot></slot>
标签。
首先接受项目目录结构
上手小案例:
Home.vue
<template>
<div>
<!-- 使用插槽 -->
<slot-test>sadfsdf</slot-test>
<slot-list>
<item-list v-for="item,n in listData" :key="n">{{item}}</item-list>
</slot-list>
</div>
</template>
<script>
import slotTest from "./slot/slotTest.vue";
import slotList from "./slot/slotList.vue";
import itemList from "./slot/itemList.vue";
export default {
name: "Home",
components: { slotTest, slotList,itemList },
data() {
return {
listData: ["123", "456", "789"],
};
},
};
</script>
<style scoped>
</style>
slotTest.vue
<template>
<div class="slot-test">
<slot></slot>
</div>
</template>
<script>
export default {
name: "slotTest",
data() {
return {};
},
};
</script>
<style scoped>
</style>
slotList.vue
<template>
<ul class="list-slot">
<slot></slot>
</ul>
</template>
<script>
export default {
name: "list",
data() {
return {};
},
};
</script>
<style scoped>
</style>
itemList.vue
<template>
<li class="item-list">
<slot></slot>
</li>
</template>
<script>
export default {
name: "itemList",
data() {
return {};
},
};
</script>
<style scoped>
</style>
接下来是作用域名插槽 , 作用域插槽虽然用的不多,但是还是挺重要的。
- 要想了解作用域插槽, 先了解需求之后比较好理解: 有时候数据在子组件中,但是却想让父组件来决定具体怎么展示
- 这时候我们可以通过作用域插槽, 让子组件通过属性绑定的方式,把子组件的数据绑定到子组件中的某个属性上
- 父组件就可以通过slot-scope = slot拿到子组件中挂载在插槽中的数据,之后通过 比如 slot.attribute 来得到具体的数据(ps: elementui 中的表格就是使用的作用域插槽)
- 注意在父组件中,如果要拿到子组件通过属性绑定在插槽中的数据需要使用 template 标签
这样肯定不行,只是基本的插槽
现在我们需要把子组件的数据传递给父组件
具名插槽
具名插槽,顾名思义就是给这个插槽起个名字,插槽在使用 name 属性绑定名字后, 在组件被调用的时候,组件内的标签通过 slot 属性来决定某个标签具体渲染哪一个插槽
以上是关于vue中插槽上手使用的主要内容,如果未能解决你的问题,请参考以下文章
vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化