Vue组件通信方式

本文主要介绍关于Vue组件通信的四种方式,分别是父向子组件通信、子向父组件通信、非父子组件的EventBus通信、Vuex状态管理

  • 第一种:父组件向子组件传递数据
    父组件一共需要做4件事
    1.import son from './son.js' 引入子组件 son
    2.在components : { son } 里注册子组件
    3.在父组件的template应用子组件,
    4.如果需要传递数据给子组件,就在template模板里写
// 1.引入子组件
import son from './son'

// 2.在ccmponents里注册子组件
 components : {
   son
 }

// 3.在template里使用子组件
 

// 4.如果需要传递数据,也是在templete里写

子组件只需要做1件事:
用props接受数据,就可以直接使用数据或修改

// 用Props接受数据
props: [
 'num'
 ],

注意:若子组件接收的数据为引用类型数据并进行修改的话,父组件的值也会改变,如果想要不影响父组件,子组件可以对接收的数据进行深复制后再修改

  • 第二种:子组件向父组件传递数据
    父组件一共需要做2件事情
    1. 在template里定义事件
    2. 在methods里写函数,监听子组件的事件触发
// 1. 在templete里应用子组件时,定义事件changeNumber
 
 

// 2. 用changeNumber监听事件是否触发
 methods: {
  changeNumber(val){
  console.log('子组件emit了',val);
  this.number = val
  },
 }

子组件一共需要1件事情
用$emit触发即可

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
 methods: {
  increment(){
   this.number++
   this.$emit('changeNumber', this.number)
  },
 }


  • 第三种: EventBus
    eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听。
    但是因为是非父子组件的关系,他们需要有一个中间组件来连接。
    我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下
    使用eventBus传递数据,我们一共需要做3件事情:
    1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)
    2.在组件1里,this.$root.Bus.$emit触发事件
    3.在组件2里,this.$root.Bus.$on监听事件
// 1.在main.js里给app组件,添加bus属性
import Vue from 'vue'
new Vue({
 el: '#app',
 components: { App },
 template: '',
 data(){
 return {
 Bus : new Vue()
 }
 }
})

// 2.在组件1里,触发emit
increment(){
 this.number++
 this.$root.Bus.$emit('eventName', this.number)
 },

// 3.在组件2里,监听事件,接受数据
mounted(){
 this.$root.Bus.$on('eventName', value => {
 this.number = value
 console.log('busEvent');
 })
},


  • 第四种: Vuex状态管理
    对于比较复杂的场景可以使用Vuex,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

你可能感兴趣的:(Vue组件通信方式)