有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线:
var bus = new Vue();
//触发组件a中的事件
bus.$emit('id-selected',1)
//在组件B创建的钩子中监听事件
bus.$on('is-selected',function(id){});
在复杂的情况下,我们应该考虑使用专门的状态管理模式。
使用slot分发内容
在使用组件时,我们常常要像这样组合他们:
<app>
<app-header></app-header>
<app-footer></app-footer>
</app>
注意两点:
1.<app>组件不知道它会收到什么内容,这是由使用<app>的父组件决定的。
2.<app>组件很可能有它自己的模板
为了让组件可以组合,我们需要一种方式来混合父组件的内容和子组件自己的模板。这个过程被称为内容分发。Vue.js实现了一个内容分发的API,使用特殊的<slot>元素作为原始内容的插槽。
编译作用域
在深入内容分发API之前,我们先明确内容在那个作用域里编译。假定模板:
<child-component>
{{ message }}
</child-component>
message应该绑定到父组件的数据。组件作用域简单点说是:
父组件模板的内容在父组件的作用域内编译,子父组件模板的内容在子组件作用域内编译。
父组件模板不应该知道子组件的状态。
如果要绑定作用域内的指令到一个组件的根节点,你应当在组件自己的模板上做:
Vue.component(
'child-component', {
// 有效,因为是在正确的作用域内
template:
'<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})
类似地,分发内容是在父作用域内编译。
单个slot
除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的slot时,父组件整个内容片段将插入到slot所在的DOM位置,并替换掉slot标签本身。
最初在<slot>标签中的任何内容都被视为
备用内容。备用内容在组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时,才显示备用内容。
假定
my-component
组件有下面模板:
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>
父组件模版:
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
渲染结果:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
|
具名slot
<slot>元素可以用一个特殊的属性name来配置如何分发内容。多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素。
仍然可以有一个匿名slot,它是默认slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的slot,这些找不到匹配的内容片段将被抛弃。
例如,假定我们有一个app-layout组件,它的模板:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父组件模板:
<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</app-layout>
渲染结果为:
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>
在组合组件时,内容分发API是非常有用的机制。