官网API: https://cn.vuejs.org/v2/guide/components.html#Prop

一、父子组件通信

1、父组件传递数据给子组件,使用props属性来实现

  • 传递普通字符串

父组件:

<child message="hello!"></child>

子组件:

Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.message 来使用
template: '<span>{{ message }}</span>'
})

结果:

hello!

  • 动态:父组件数据如何传递给子组件

父组件:

<child :my-message="parentMsg"></child>

data(){
return {
parentMsg: [1,2,3,4,5]
};
}

子组件:通过props属性接收数据

// 方式一
props: ['myMessage'] // 方式二
props: {
myMessage: Array //指定传入的类型,如果类型不对,会警告
} // 方式三
props: {
myMessage: {
type: Array,
default: [5,6,7] //指定默认的值
}
}

props属性验证有以下形式:

Vue.component('example', {
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})

2、子组件与父组件通信

vue是单向数据传递的,如果子组件直接改变父组件传过来的数据是不允许的。但是可以通过触发事件通知父组件改变数据,实现改变子组件的目的。

子组件:

<div @click="childClick()"></div>

methods: {
childClick() {
this.$emit('tell','hello'); //主动触发tell方法,'hello'为向父组件传递的数据
}
}

父组件:

 <child @tell="change" :msg="msg"></child> //监听子组件触发的tell事件,然后调用change方法;msg是父组件传给组件的数据

methods: {
change(msg) {
this.msg = msg;
}
}

二、非父子组件通信

有时候,非父子关系的两个组件之间也需要通信。在简单的场景下,可以使用一个空的 Vue 实例作为事件总线。原理就是把 Vue 实例当作一个中转站。

var bus = new Vue();  // 创建事件中心
// 触发组件 A 中的事件
<div @click="eve"></div>
methods: {
eve() {
bus.$emit('change','hehe'); //bus触发事件
}
}
// 在组件 B 创建的钩子中监听事件
<div></div>
created() {
bus.$on('change', () => { // bus接收事件
this.msg = 'hehe';
});
}

方法2:

在初始化web app的时候,main.js给data添加一个 名字为eventhub 的空vue对象。就可以使用 this.$root.eventHub 获取对象。

new Vue({
el: '#app',
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})

在组件内调用事件触发

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$root.eventHub.$emit('eventName', data)

在另一个组件调用事件接受,移除事件监听器使用$off方法。

this.$root.eventHub.$on('eventName', (data)=>{
// 处理数据
})

vue2.0父子组件以及非父子组件通信的更多相关文章

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

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

  2. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  3. vue传值(父子传值,非父子传值)

    vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...

  4. React:受控组件与非受控组件混用实战 - 译文

    原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...

  5. 浅谈react受控组件与非受控组件

    引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...

  6. react 表单(受控组件和非受控组件)

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  7. react中 受控组件和 非受控组件 浅析

    一 受控组件 顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二 非受控组件 顾名思义,非受控,也就是内部的视图变化,st ...

  8. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  9. vue2.0父子组件以及非父子组件通信传参详解

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

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

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

随机推荐

  1. HDU1425 A Chess Game

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1524 思路:题目就是给你一个拓扑图,然后指定点的位置放棋子,然后两人轮流移动棋子(题目中的边的关系),直到 ...

  2. 洛谷P3870 [TJOI2009]开关

    题目描述 现有\(N(2 ≤ N ≤ 100000)\)盏灯排成一排,从左到右依次编号为:\(1,2,......,N\).然后依次执行\(M(1 ≤ M ≤ 100000)\)项操作,操作分为两种: ...

  3. OnclickListener

    https://developer.android.com/reference/android/view/View.OnClickListener.html# https://blog.csdn.ne ...

  4. 二次开发php

    AB模板  http://www.adminbuy.cn/ 码源 (站长之家)http://down.chinaz.com/ 易无袖资源 http://www.ewuxiu.com/ A5码源 htt ...

  5. 自定义ClassLoader加载加密的class文件

    package com.yd.wmsc.util; public class Test { public void say(){ System.out.println("Say Hello& ...

  6. ThrowableUtil

    public class ThrowableUtil { public static Throwable getDeepestCause(final Throwable throwable) { in ...

  7. SPA 介绍

    SQL 性能分析器(SPA)工具概览 作为 Oracle Real Application Testing 选件/特性,这篇文章将提供一个关于 SQL 性能分析器(SPA)工具的简要概览.这是此系列的 ...

  8. POJ 1797 ——Heavy Transportation——————【最短路、Dijkstra、最短边最大化】

    Heavy Transportation Time Limit:3000MS     Memory Limit:30000KB     64bit IO Format:%I64d & %I64 ...

  9. idea没有绑远程地址,如何提交到github的空项目

    一 有同事问我怎么提交到github的空项目....这么简单.... 二 1.创建本地的git仓库 选择自己的项目 创建成功 2.添加代码,选中左边的文件,add 3.提交 5.定义远程仓库,不定义的 ...

  10. 使用Java生成带有下划线字体的文字

    HashMap<TextAttribute, Object> hm = new HashMap<TextAttribute, Object>(); hm.put(TextAtt ...