Vue 组件 非父子组件通信
有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线:
var bus = new Vue();
//触发组件a中的事件
bus.$emit('id-selected',1)
//在组件B创建的钩子中监听事件
bus.$on('is-selected',function(id){});
在复杂的情况下,我们应该考虑使用专门的状态管理模式。
使用slot分发内容
在使用组件时,我们常常要像这样组合他们:
my-component
组件有下面模板:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
|
具名slot
<slot>元素可以用一个特殊的属性name来配置如何分发内容。多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素。
仍然可以有一个匿名slot,它是默认slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的slot,这些找不到匹配的内容片段将被抛弃。
例如,假定我们有一个app-layout组件,它的模板:
Vue 组件 非父子组件通信的更多相关文章
- Vue兄弟组件(非父子组件)状态共享与传值
前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~ 内容里的<br> ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- vue组件通信之非父子组件通信
什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit 触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on 监听当前实例上的自定义事件.事件可以 ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
随机推荐
- 自问自答:在VB中如何实现像C++一样printf的功能
问: 每个整型都转换成5位的字符串,不足的在前面补0.比如:1转换成“00001”,10转换成“00010”.怎么实现? 答: format(1,"00000") from: 百度 ...
- Linux下Shell脚本替换换行符(转)
说明:过滤换行符确实有点吭,不是那么好弄.处理文本时需要将换行符替换为空格,若使用sed命令会比较麻烦,而使用tr命令非常方便. 输入文本(country.txt) China America Fra ...
- 关于MYsql 多字段排序
SELECT switch_data.* , lan_data.ename FROM switch_data , lan_data WHERE switch_data.address = '佳合丽景' ...
- 【spring mvc】spring mvc POST方式接收单个字符串参数,不加注解,接收到的值为null,加上@RequestBody,接收到{"uid":"品牌分类大”},加上@RequestParam报错 ---- GET方式接收单个参数的方法
spring mvc POST方式 接收单个参数,不加任何注解,参数名对应,接收到的值为null spring mvc POST方式 接收单个参数,加上@RequestBody,接收到参数格式:{&q ...
- Android性能调优篇之探索JVM内存分配
开篇废话 今天我们一起来学习JVM的内存分配,主要目的是为我们Android内存优化打下基础. 一直在想以什么样的方式来呈现这个知识点才能让我们易于理解,最终决定使用方法为:图解+源代码分析. 欢迎访 ...
- Coherence的集群成员的离开和加入机制研究
最近在客户那里环境中coherence集群不稳定,所以找出一些文档,需要搞清楚Coherence内部的一些机制 1.集群成员的离开 关于状态的检测,官方的说法是: Death detection is ...
- D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
- makefile opencv的案例
CXX = g++ LIBS +=`pkg-config --libs opencv` INC +=`pkg-config --cflags opencv` CPPFLAGS += -g -std=c ...
- scrapy-splash抓取动态数据例子十二
一.介绍 本例子用scrapy-splash通过搜狗搜索引擎,输入给定关键字抓取资讯信息. 给定关键字:数字:融合:电视 抓取信息内如下: 1.资讯标题 2.资讯链接 3.资讯时间 4.资讯来源 二. ...
- win8 推送通知 小记
http://blog.csdn.net/nacl025/article/details/8998552 http://blog.csdn.net/nacl025/article/details/90 ...