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是非常有用的机制。