插槽详解

最新推荐文章于 2025-03-13 20:48:01 发布

qq_41302594

最新推荐文章于 2025-03-13 20:48:01 发布

阅读量2k

点赞数 2

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41302594/article/details/105249486

版权

本文详细介绍了Vue.js中的插槽机制，包括插槽的概念、使用方式、后备内容、具名插槽、作用域插槽、动态插槽名、具名插槽的缩写以及其他示例。插槽允许父组件向子组件注入内容，实现组件的灵活组合。通过v-slot统一了之前的slot和slot-scope，同时支持具名插槽和作用域插槽，提升了组件的复用性和可定制性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽详解

插槽详解

插槽详解

在 2.6.0 版本之后，slot 以及 slot-scope 由 v-slot 统一替代，但依然未被移除。

1. 什么是插槽

插槽是 vue.js 开发员人根据从 Web Components 规范草案中获取的灵感，设计的一套 API，这套 API 允许我们对组件进行组合。

插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

类似于 React.js 中的组合（children prop），插槽允许将一些其他的组件作为子组件传递给指定组件。

2. 如何使用

比如下面的代码：

在子组件中：

<template>
	<div>
        <h1>
  			插槽的使用
    	</h1>
        <slot></slot>
    </div>
</template>
<script>
export default{
    name: 'child'
}
</script>

在父组件中：

<template>
	<div>
     	<div>
            使用插槽分发内容
    	</div>
        <Child>
    		<div>
                这里的 div 替代了 slot 标签。
    		</div>
    	</Child>
    </div>
</template>
<script>
import Child from './components/Child';
export default {
    name: 'Father',
}
</script>

这样，就会出现：

在这里插入图片描述

如果，在子组件中，去除 <slot></slot>，那么则不会出现 这里的 div 替代了 slot 标签。

总结：如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或html，是无法做到的。

但是，使用插槽需要注意作用域，子模板里的所有内容都是在子作用域中编译的。父级模板里的所有内容都是在父级作用域中编译的。

比如，还是上面的例子，如果我们这样使用，在父组件中，有一个 props：

<template>
	<div>
     	<div>
            使用插槽分发内容
    	</div>
        <child>
    		<div>
                这里的 div 替代了 slot 标签。
    		</div>
    	</child>
    </div>
</template>
<script>
import child from './components/Child';
export default {
    name: 'Father',
    props: ['name'],
}
</script>

在 App.vue 中导入 Father 组件：

<template>
  <div id="app">
	<Father name="father" />
  </div>
</template>

<script>
import Father from '@/components/Father';
export default {
  name: 'App',
  components: {
    Father,
  }
}
</script>

<style scope>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}

</style>

那么，子组件 Child 是访问不到 name，这个 props 的。

3. 后备内容

后备内容，指挥在没有提供内容的时候被渲染。来看一下官网的例子：

在 <submit-button> 组件中：

<button type="submit">
    <slot></slot>
</button>

如果在 <slot></slot> 标签中，填入 Submit 内容，那么，当父组件没有向其中添加其他内容的时候，会默认渲染 Submit：

<html>

<head>
    <meta charset="utf-8">

最低0.47元/天解锁文章