vue父子组件slot插槽
文章目录
-
- 默认插槽
- 具名插槽
- 作用域插槽
- 之前的内容(可以不看)
默认插槽
默认插槽是最基本的插槽类型。当我们在父组件中使用子组件时，可以在子组件内部使用默认插槽，将父组件中的内容插入到子组件中的特定位置。默认插槽可以没有名字，直接使用“slot”作为插槽的名称。
子组件（ChildComponent.vue）：
// test.vue
<a href="#">
<slot>slot>
a>
父组件（ParentComponent.vue）：
// home.vue
<test>
Hello Word
test>
具名插槽
当子组件需要在不同位置接收不同内容时，我们可以使用具名插槽。具名插槽允许我们在父组件中使用不同名称的插槽，以便在子组件中将内容分发到正确的位置。在子组件中，我们可以使用“slot”元素的“name”属性来定义具名插槽。
子组件（ChildComponent.vue）：
<template>
<div>
<header>
<!-- 具名插槽 header -->
<slot name="header"></slot>
</header>
<main>
<!-- 具名插槽 main，默认内容 -->
<slot name="main">Default Main Content</slot>
</main>
<footer>
<!-- 具名插槽 footer，默认内容 -->
<slot name="footer">Default Footer Content</slot>
</footer>
</div>
</template>
<script>
export default {
// 子组件可能有其他逻辑和数据
};
</script>
父组件（ParentComponent.vue）：
给插槽起了名称以后，我们在父组件中就可以使用v-slot:name或者#name往指定的插槽填充内容。
#name 是v-slot:name的简写形式
<template>
<div>
<child-component>
<template v-slot:header>
<h1>This is a custom headerh1>
template>
<template v-slot:main>
<p>Main content goes herep>
template>
<template #footer>
<p>Custom footer contentp>
template>
child-component>
div>
template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
script>
作用域插槽
如果需要用一句话去总结作用域插槽，那就是在父组件中访问子组件的数据，或者从数据流向的角度来讲就是将子组件的数据传递到父组件。
子组件（ChildComponent.vue）：
<ul>
<li
v-for="todo in filteredTodos"
v-bind:key="todo.id"
>
<slot name="todo" v-bind:todo="todo">
{{ todo.text }}
slot>
li>
ul>
<script>
export default {
data() {
return {
filteredTodos: [
{id: 1,text:1,isComplete: true},
{id: 2,text:2,isComplete: true},
]
};
}
};
script>
```
**父组件（ParentComponent.vue）：**
```xml
<todo-list v-bind:todos="todos">
<template v-slot:todo="{ todo }">
<span v-if="todo.isComplete">✓span>
{{ todo.text }}
template>
todo-list>
更多有意义的内容请参阅 https://juejin.cn/post/7208015274079469627#heading-11
之前的内容(可以不看)
关于父组件在使用子组件的时候，向子组件插入内容的方法
1 创建一个子组件，并在vue实例中注册
这是创建子组件
var testzujian = {
template:`
这是子组件的内容
`
}
这是注册子组件
let vm = new Vue({
el:'.root',
components:{
testzujian:testzujian
},
})
2 在HTML代码中使用子组件
<body>
<div class="root">
<testzujian></testzujian>
</div>
</body>
3 在vue实例中写入想要插入到子组件的内容
let vm = new Vue({
el:'.root',
components:{
testzujian:testzujian
},
template:`
这是父组件向子组件插入的内容
`,
})
其中template是一个模板字符串，这个模板字符串里面最外面的div标签是根目录，必须存在。
根目录之下的是已经注册的子组件，也是需要加内容的子组件标签，必须存在
子组件标签之内的也是必须存在的
其上的属性v-slot绑定了一个名字slotcontent，这个名字可以随意取，但必须得有
这个标签里面就用来添加
父组件想要插入子组件的内容
4 在子组件的模板中通过一个slot标签来引入父组件模板中内添加的内容
var testzujian = {
template:`
这是子组件的内容
`
}
这是刚才创建好的子组件，现在在其template的模板中，加入了一个slot标签，属性name绑定为刚才中v-slot：绑定的名字，也就是slotcontent。