插槽详解
在 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">