Vue 组件 非父子组件通信

有时候两个组件也需要通信（非父子关系），在简单的场景下，可以使用一个空的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是非常有用的机制。