vue父子组件slot插槽

可缺不可滥

已于 2023-11-14 18:32:46 修改

阅读量3k

点赞数 2

分类专栏： vue 文章标签： vue slot 插槽

于 2019-11-05 16:57:14 首次发布

本文链接：https://blog.csdn.net/glorydx/article/details/102918914

版权

vue 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

文章目录

默认插槽

默认插槽是最基本的插槽类型。当我们在父组件中使用子组件时，可以在子组件内部使用默认插槽，将父组件中的内容插入到子组件中的特定位置。默认插槽可以没有名字，直接使用“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 header</h1>
      </template>
      
      <template v-slot:main>
        <p>Main content goes here</p>
      </template>
      
      <template #footer>
        <p>Custom footer content</p>
      </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"
  >
    <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
    -->
    <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>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/38c766479c2d48e591edbdb7b83bf4a4.png#pic_center)



**父组件（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:`<div>
            <span>这是子组件的内容</span>   
            </div>`
    }

这是注册子组件

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:`<div>
            <testzujian>
                <template v-slot:slotcontent>
                    <span>这是父组件向子组件插入的内容</span>    
                </template> 
            </testzujian>
            </div>`,
    })

其中template是一个模板字符串，这个模板字符串里面最外面的div标签是根目录，必须存在。
根目录之下的是已经注册的子组件，也是需要加内容的子组件标签，必须存在
子组件标签之内的也是必须存在的
其上的属性v-slot绑定了一个名字slotcontent，这个名字可以随意取，但必须得有
这个标签里面就用来添加
父组件想要插入子组件的内容

4 在子组件的模板中通过一个slot标签来引入父组件模板中内添加的内容

var testzujian = {
        template:`<div>
            <span>这是子组件的内容</span>
            <slot name="slotcontent">
            </slot>    
            </div>`
    }

这是刚才创建好的子组件，现在在其template的模板中，加入了一个slot标签，属性name绑定为刚才中v-slot：绑定的名字，也就是slotcontent。

可缺不可滥

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue父子组件slot插槽

当我们在父组件中使用子组件时，可以在子组件内部使用默认插槽，将父组件中的内容插入到子组件中的特定位置。这是刚才创建好的子组件，现在在其template的模板中，加入了一个slot标签，属性name绑定为刚才中v-slot：绑定的名字，也就是slotcontent。如果需要用一句话去总结作用域插槽，那就是在父组件中访问子组件的数据，或者从数据流向的角度来讲就是将子组件的数据传递到父组件。根目录之下的是已经注册的子组件，也是需要加内容的子组件标签，必须存在。父组件想要插入子组件的内容。往指定的插槽填充内容。
复制链接

扫一扫