一、父子组件通信

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息

具体机制如下图:

1、父组件传递数据给子组件 (  parent  ==》 children  )

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在父组件内的子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

子组件要显式地在子组件内用 props 声明它预期的数据。

(1) props 属性

  1)数据传递

    1. 字面量语法:传递静态数据  (eg:  child-msg="msg" 传递给子组件的值为 msg 这个字符串)

    2. 动态语法:传递动态数据,使用 v-bind 绑定props (eg:  v-bind:child-msg="msg" 传递给子组件的值为 data=>msg 这个对象)

    3. 传递对象:可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)  

// parent component

// data =>
todo: {
text: 'Learn Vue',
isComplete: false
} // template
<todo-item v-bind="todo"></todo-item>
// 等价于
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"
></todo-item>

  2)prop 是单向绑定(单向数据流):当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态。

  3)一般不允许在子组件中改变props,但当子组件中需要改变props,有以下两种情形:

    1. Prop 作为初始值传入后,子组件想把它当作局部数据来用

       可在子组件中新建一副本(定义一个局部变量),并用 prop 的值初始化它:

props: ['msg'],
data: function () {
return {childMsg: this.msg}
}

    2. prop 作为原始数据传入,由子组件处理成其它数据输出

      可定义一个计算属性,处理 prop 的值并返回:

props: ['msg'],
computed: {
computedMsg: function () {
return this.msg.trim().toLowerCase()
}
}

(2) 示例:

》parent 组件 parent.vue

    <child :child-msg="msg"></child>  //这里必须要用 小写,横杠 - 代替驼峰,因为html不区分大小写
</parent> data(){
return {
msg: [,,]
};
}

》child 组件 child.vue

写法一
props: ['childMsg'] // 驼峰式 写法二
props: {
childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
} 写法三
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串且有默认值
propC: {
type: String,
required: true,
default: 'ccc'
},
// 数组/对象的默认值应当由一个工厂函数返回
propD: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propE: {
validator: function (value) {
return value > 10
}
},
childMsg: {
type: Array, // 类型
default: [0,0,0] //这样可以指定默认的值
}
}

2、子组件传递数据给父组件 (  children  ==》 parent  )

vue是单向数据传递,子组件想要改变数据,需通过触发自定义事件来通知父组件改变数据,从而达到改变子组件数据的目的.

》child 组件  child.vue

<template>
<button @click="sendToParent">点击按钮</button>
</template> methods: {
sendToParent() {
this.$emit('childGet','父组件获取到子组件传递的数据'); //主动触发
}
}

》parent 组件 parent.vue

<div>
<child @childGet="change" :msg="msg"></child> //监听子组件触发的childGet事件,然后调用change方法
</div>
methods: {
change(msg) { //参数msg是子组件传递的值
this.msg = msg; // 赋值给绑定的msg 属性
}
}

二、非父子间通信

有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

1、兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据eventBus

2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。

3、传递数据方,通过一个事件触发

bus.$emit(方法名,要传递的数据)。

4、接收数据方,通过mounted(){}触发

bus.$on(方法名,function(接收数据的参数){用该组件的数据接收传递过来的数据})(注:此时函数中的this已经发生了改变,可以使用箭头函数)

//  创建一个 空的 Vue 实例 作为中央事件总线
var bus = new Vue() // 触发组件 A 中的事件
bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})

三、父组件访问子组件

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例:

//  使用在dom元素上,引用指向Dom元素
<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p> // 使用在子组件上,引用指向这个子组件实例
<!-- vm.$refs.child will be the child comp instance -->
<child-comp ref="child"></child-comp>

当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

注: 当 ref 和 v-for 一起使用时,ref 是一个数组,包含相应的子组件。

       $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs。

 

  • refs 子组件索引
父组件 parent.vue

template

<div id="parent">
<user-profile ref="profile"></user-profile>
</div> js var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile //profile是refs 索引ID

子组件与子组件之间通信 若项目逻辑较复杂,建议使用 vuex

vuex 介绍和具体使用见 官方文档 https://vuex.vuejs.org/

具体见demo   https://github.com/136shine/study_demo/tree/master/vue-demo1

vue2.0 通信的更多相关文章

  1. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  2. vue2.0父子组件之间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  3. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  4. vue2.0父子组件通信的方法

    vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...

  5. Vue2.0组件之间通信(转载)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  6. vue2.0 $emit $on组件通信

    在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...

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

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

  8. vue2.0 父子组件之间的通信问题

    概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...

  9. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

随机推荐

  1. 通用 C# DLL 注入器injector(注入dll不限)

    为了方便那些不懂或者不想用C++的同志,我把C++的dll注入器源码转换成了C#的,这是一个很简单实用的注入器,用到了CreateRemoteThread,WriteProcessMemory ,Vi ...

  2. pyspark 学习笔记

    from pyspark.sql import SparkSession spark = SparkSession \ .builder \ .appName("Python Spark S ...

  3. python写一个查询接口

    知识点: 1.flask_sqlalchemy查询: Flask-SQLAlchemy 在您的 Model 类上提供了 query 属性.当您访问它时,您会得到一个新的所有记录的查询对象.在使用 al ...

  4. Delphi XE2 之 FireMonkey 入门(28) - 数据绑定: TBindingsList: 表达式函数测试: SelectedText()、CheckedState()

    Delphi XE2 之 FireMonkey 入门(28) - 数据绑定: TBindingsList: 表达式函数测试: SelectedText().CheckedState() 示例构想: 用 ...

  5. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第3节 接口_1_接口概述与生活举例

  6. python 列表、字典多排序问题

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/justin051/article/det ...

  7. 21次C++作业

    //第一题目 class A //A为基类 {public: void f1( ); int i; protected: void f2(); int j; private: int k; }; /* ...

  8. MySQL练习与小结

    当你专注一件事的时候,时间总是过得很快! foreign key 练习 -- 切换数据库 use stumgr -- 删除班级表 drop table t_class1 -- 创建一个班级表 crea ...

  9. Java学习day2关键字

    java的基本语法(1) 一.关键字 定义:被Java语言赋予特殊含义,用做专门用途的字符串 特点:关键字中的所有字母都为小写 二.标识符 定义:java对各种变量.方法和类等要素命名时所使用的的字符 ...

  10. 错排问题 && 洛谷 P1595 信封问题

    传送门 一道裸的错排问题 错排问题 百度百科上这样说 就是对于一个排列,每一个数都不在正确的位置上的方案数.n 个元素的错排数记为 D(n). 公式 D(n)=(n−1)∗(D(n−2)+D(n−1) ...