雅荷心语博客官方文档这样说
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。Vue.js 实现了一个内容分发 API，参照了当前 Web Components 规范草案，使用特殊的
<slot>元素作为原始内容的插槽。
那我们在实际中到底怎么使用:
我们新建两个组件
父组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div class="hello"> <div> <h1>我是父组件的标题</h1> <component> </component> </div> </div> </template> <script> import component from './Test.vue' export default { name: 'hello', data () { return {} }, components:{ component }, created:function () {} } </script> |
子组件里
|
1 2 3 4 5 6 |
<template> <div> <h2>我是子组件的标题</h2> <slot>只有在没有要分发的内容时才会显示。</slot> </div> </template> |
这样执行以下代码,
效果是这样
很明显可以看出来: 写在父组件 component 里面的内容被动态的显示在了子组件里面
如果我把 component 里面的内容删除,则会变成这样
显示出来了我们定义的默认值,这样大家应该能想到使用场景了!
我们能直接动态传内容到子组件里面,如果不传,就使用子组件里面默认的值!
比如我们的弹窗,就可以直接使用这样来自定义内容了
