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

Vue 组件 非父子组件通信的更多相关文章

  1. Vue兄弟组件(非父子组件)状态共享与传值

      前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~  内容里的<br> ...

  2. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  3. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  4. vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

    vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...

  5. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  6. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  7. Vue父子组件及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...

  8. vue组件通信之非父子组件通信

    什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit  触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on  监听当前实例上的自定义事件.事件可以 ...

  9. vue2.0父子组件以及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

随机推荐

  1. 自问自答:在VB中如何实现像C++一样printf的功能

    问: 每个整型都转换成5位的字符串,不足的在前面补0.比如:1转换成“00001”,10转换成“00010”.怎么实现? 答: format(1,"00000") from: 百度 ...

  2. Linux下Shell脚本替换换行符(转)

    说明:过滤换行符确实有点吭,不是那么好弄.处理文本时需要将换行符替换为空格,若使用sed命令会比较麻烦,而使用tr命令非常方便. 输入文本(country.txt) China America Fra ...

  3. 关于MYsql 多字段排序

    SELECT switch_data.* , lan_data.ename FROM switch_data , lan_data WHERE switch_data.address = '佳合丽景' ...

  4. 【spring mvc】spring mvc POST方式接收单个字符串参数,不加注解,接收到的值为null,加上@RequestBody,接收到{"uid":"品牌分类大”},加上@RequestParam报错 ---- GET方式接收单个参数的方法

    spring mvc POST方式 接收单个参数,不加任何注解,参数名对应,接收到的值为null spring mvc POST方式 接收单个参数,加上@RequestBody,接收到参数格式:{&q ...

  5. Android性能调优篇之探索JVM内存分配

    开篇废话 今天我们一起来学习JVM的内存分配,主要目的是为我们Android内存优化打下基础. 一直在想以什么样的方式来呈现这个知识点才能让我们易于理解,最终决定使用方法为:图解+源代码分析. 欢迎访 ...

  6. Coherence的集群成员的离开和加入机制研究

    最近在客户那里环境中coherence集群不稳定,所以找出一些文档,需要搞清楚Coherence内部的一些机制 1.集群成员的离开 关于状态的检测,官方的说法是: Death detection is ...

  7. D3.js系列——初步使用、选择元素与绑定数据

    D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...

  8. makefile opencv的案例

    CXX = g++ LIBS +=`pkg-config --libs opencv` INC +=`pkg-config --cflags opencv` CPPFLAGS += -g -std=c ...

  9. scrapy-splash抓取动态数据例子十二

    一.介绍 本例子用scrapy-splash通过搜狗搜索引擎,输入给定关键字抓取资讯信息. 给定关键字:数字:融合:电视 抓取信息内如下: 1.资讯标题 2.资讯链接 3.资讯时间 4.资讯来源 二. ...

  10. win8 推送通知 小记

    http://blog.csdn.net/nacl025/article/details/8998552 http://blog.csdn.net/nacl025/article/details/90 ...