最详细的vue的父子组件以及非父子组件之间的通信方式

1.父组件传递数据给子组件

父组件数据如何传递给子组件呢?可以通过props属性来实现
父组件:
//这里必须要用 - 代替驼峰
data(){ return { msg: [1,2,3] }; }
子组件通过props来接收数据: 方式1:
props: ['childMsg']
方式2 :
props: { childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告 }
方式3:
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 } }
这样呢,就实现了父组件向子组件传递数据.

【案例演示1】
父组件里面的内容
image.png
子组件里面的内容
image.png
注意:这里的第一个父组件传值给子组件分为传引用和传值两种方式,传引用的时候改变引用关系,则子组件的也会变化(改变父组件中数组的引用时可以看到子组件的props数组随之改变,而子组件中绑定的数组确并没有随之改变)传值则不会

2.子组件与父组件通信

那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.
子组件: <div @click="up">
methods: { up() { this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据 } }
父组件:
//监听子组件触发的upup事件,然后调用change方法
methods: { change(msg) { this.msg = msg; } }

【案例演示2】
父组件里面的内容
image.png
子组件里面的内容
image.png

注意:简而言之就是先子组件定义一个事件,然后通过$emit方式
传递过去一个事件名称,,父组件首先在html上用@事件名######="子组件自定义事件名"来接受,最后就是调用父组件刚刚定义的######事件,传入一个参数,就可以接收来自子组件的事件触发及其参######数传递。
大家可以参考这篇文章https://www.cnblogs.com/LoveAndPeace/p/7273648.html

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信. 所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.
let Hub = new Vue(); //创建事件中心
组件1触发:
methods: { eve() { Hub.$emit('change','hehe'); //Hub触发事件 } }
组件2接收:
created() { Hub.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); }
这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站!
以下是详细代码
<meta charset="utf-8">

Vue 官网介绍了非父子组件通信方法:

image

不过官网说的太简单了,新手看完估计还是一脸懵逼。还有这个空的 Vue 实例放到哪里合适也值得商榷。

这篇文章的目的就是用一个简单的例子让你明白如何用 Bus 🚌 来进行通信:

image

假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件

// 根组件(this.$root)

new Vue({

el: '#app',

 router,

 render: h => h(App),

 data: {

  // 空的实例放到根组件下,所有的子组件都能调用

Bus: new Vue()

 }

})

bb 组件内调用事件触发↓

<button @click="submit">提交<button>

methods: {

  submit() {

   // 事件名字自定义,用不同的名字区别事件

   this.$root.$emit('eventName', 123)

  }

 }

aa 组件内调用事件接收↓

// 当前实例创建完成就监听这个事件

created(){

 this.$root.$on('eventName', value => {

  this.print(value)

 })

},

methods: {

 print(value) {

  console.log(value)

 }

},

// 在组件销毁时别忘了解除事件绑定

beforeDestroy() {

  this.$root.Bus.$off('eventName')

},

我自己的实践:

1、这是父组件app.vue,分别有两个子组件input和dialog

注意:这里一定要引入vue不然会报错
image.png
1、这是一个输入框组件,通过输入触发change事件,给弹出框组件传值
image.png
image.png

***关键词:通过$emit触发事件

2、这是一个弹出框组件,通过监听输入框组件的change事件传过来的值来判断是否弹出
image.png

***关键词:通过$on接收事件

这样就可以了,是不是很简单?

问题一:如果有多个组件组件需要通信,是不是要在根组件上多建几个 Bus?

答:不需要的,只要保证事件名 (eventName)不一样就行了。

问题二:为什么要弄个 Bus?直接 this.$root.$on、this.$root.$emit 不更简单粗暴?

答:按照文档上的说法是专门用一个空的 Vue 实例(Bus)来做中央事件总线更加清晰也易于管理。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 2,846评论 0 30
  • Android之ActivityManagerService浅谈 一、在本文中需要提前了解的知识: 1)AMS —...
    远远飘着云阅读 329评论 0 1
  • 什么是vuex? Vuex 是一个专为Vue.js用程序开发的状态管理模式。 状态管理模式中的状态是指什么状态?为...
    小熊530阅读 28评论 0 0
  • 大家好,我是IT修真院北京分院web第31期学员金立剑 【js-6】DOM有哪些操作 1.背景介绍 什么是DOM?...
    bqzhzqay阅读 61评论 1 1
  • 股市有风险,投资需谨慎! 早就对股市垂涎已久了,天天听李先生在耳朵边分析股市行情,听得心痒痒,但是又怕怕的。 说来...
    小迷糊Lyla阅读 53评论 0 2