Vue组件之间的通讯方式——父传子、子传父、兄弟组件间的通讯

目录

一、父传子

1、props 属性传递

 2、方法传递

3、 $parent获取方法和属性

二、子传父

1、 属性传递

2 、通过$refs主动获取子组件方法和属性

3 、通过$children主动获取子组件方法和属性

三、兄弟间的通讯

1 、通过共同的父亲进行传递信息

2、全局事件总线—EventBus

3、 通过PubSub通讯

4 、通过Vuex通讯

---

组件之间传值通讯分为三种: 父传子、子传父、兄弟组件之间的通讯;

前提

这里我们使用了vue/cli4使用默认配置常见的项目，详情 点击创建好项目之后我们需要这样做 在components的文件夹下新建名为Parent.vue和ChildOne分别充当父组件和子组件。然后在App.vue和Parent.vue中映射成组件标签

基本结构如下
Parent.vue

ChildOne.vue

 

一、父传子 1、props 属性传递

父组件通过自定义属性给子组件传值，子组件用props接收

代码如下

Parent.vue

   //template
    
        Parent
        
    

//  script  
  data () {
        return {
            msg:'i am you father'
        }
    },

ChildOne.vue 

  //template 
   
        ChildOne
        接收到父亲传来的消息:{{msgToChild}}
    

//script
export default {
    //第一种写法
    // props:['msgToChild']
    //第二种写法
     props: {
            msgToChild: {
                type: String,
            }
        }
};

 2、方法传递

通过组件标签进行方法的传递，子组件$emit触发方法

父组件：Parent.vue

//template 
 
  

//script   
 methods:{
        /*定义方法*/
        showMsg () {
            alert('i am your father')
        }
    },

子组件：ChildOne.vue

    //tempalte
    接收到父亲传来的消息:{{msgToChild}}
    
    place click me

//script   
 props:{
        /*接收方法*/
        methodToChild:{
            type:Function
        }
    },
 methods:{
        /*触发方法*/
        needFatherMethod () {
            this.$emit('methodToChild')
        }
    }

3、 $parent获取方法和属性

通过$parent来获取父组件的实例，从而获取父组件的属性和方法

子组件：ChildOne.vue

//template   
 
    place $parent

    /*定义后去父组件实例的方法*/
    $parentMethod (){
        console.log(this.$parent._data.msg)//i am you father
        console.log(this.$parent.msg)//i am you father
        this.$parent.showMsg()//调用方法
    }

  

二、子传父 1、 属性传递

通过触发父组件的方法进行传递数据

        这等同于父 ===> 子 传递方法，方法的参数就是子组件的数据，emit的第二个参数就是父组件想要的数据
        缺点
                需要一定的触发条件
                不是响应式数据
         一般触发条件只能在子组件，因为要得到的是子组件的数据(比如说在父函数定义一个方法通过这种方式来的到子组件数据，似乎比较困难。但是可以通过生命周期函数在子组件触发来传递数据)

父组件：Parent.vue

//template
接收到子组件传来的消息: {{childMsg}}

  //script
  data () {
        return {
            childMsg:''
        }
    },
    /*1.定义得到子组件数据的方法，触发条件只能在子组件
    * 2.在data中定义一个属性来保存子组件传递过来的数据
    * */
    getChildMsg (childMsg){
        this.childMsg = childMsg
    },

子组件：ChildOne.vue

//template

 place send parent msg

//script   
 data (){
        return {
            /*子组件数据*/
            msg:'i am your child'
        }
    },
   /*触发父组件的方法，并传递参数*/
   setParentMsg (){
       this.$emit('getChildMsg',this.msg)
   },

 

2 、通过$refs主动获取子组件方法和属性

通过ref得到子组件的实例，进而得到子组件的方法和属性
父组件：Parent.vue

//template
作为父亲，我要主动拿到孩子的信息
这是孩子的信息： {{childMsg}}
 
 

//script
   data () {
        return {
            childMsg:''
        }
    },
    /*得到子组件的方法和属性*/
    getMyChildMsgAndMethod (){
        this.childMsg = this.$refs.myChild.msg
        this.$refs.myChild.methodToParent()
    },

 

子组件：ChildOne.vue

//script   
/*父亲调用的方法*/
   methodToParent (){
     alert('i am you child')
   },

 

3 、通过$children主动获取子组件方法和属性

通过this.$children得到的是一个子组件实例的数组

除此之外，他的用法几乎和$refs相同

父组件：Parent.vue

//template 
  $children得到孩子信息
   这是孩子的信息： {{childMsg}}

//script
    $childrenMsg (){
        /*this.$children得到是一个数组*/
        const child = this.$children[0]
        this.childMsg = child.msg
        child.methodToParent()
    },

 

三、兄弟间的通讯 1 、通过共同的父亲进行传递信息

        父组件只充当邮递员的角色

他所利用的就是，父子和子父之间的通讯，两者的结合 在components文件夹下，新建ChildTwo.vue文件，代码如下

子组件：ChildTwo.vue

//template

//script   
 export default {
        props:['common-msg'],
        name: "ChildTwo",
    }

 子组件：ChildOne.vue

//template 
 
  place send brother msg

//script  
  data (){
        return {
            /*定义数据*/
            commonMsg:'i love you ,my brother'
        }
    },
    props:{
    //接收父亲传来的方法，主要用于拿到此组件的数据
	  poster:{
	      type:Function
	  },
    },
     /*调用方法传递数据*/
    setBrotherMsg (){
        this.$emit('poster',this.commonMsg)
    },

父组件：Parent.vue 

//template  
 
   
   
   

//script   
 data () {
        return {
        	//定义保存数据的变量
            commonMsg:''
        }
    },
    methods:{
        /*定义拿到数据的方法*/
        poster (commonMsg){
            this.commonMsg = commonMsg
        },
    }

 

 

2、全局事件总线—EventBus

EventBus相当于全局的$emit,$on

我们需要把它放到一个所有组件都能看得到的地方

//eventBus原理就是利用和emit 并实例化一个全局 vue 实现数据共享
 
//main.js
    Vue.prototype.$bus=new Vue()
 
 
//传值组件
    this.$bus.$emit('eventTarget','值')
 
 
//接收组件
    this.$bus.$on('eventTarget',value=> console.log(value))

3、 通过PubSub通讯

PubSub是一个包，专门用于组件之间的通讯

使用PubSub.subsribe()订阅(注册)事件
使用PubSub.publish()触发事件
他与event-bus的使用差不多，只是参数略有不同，绑定事件的第一个参数必须传(请看下面的例题)
一般在React中用的较多

使用

下载

npm install pubsub-js --save

      2.在ChildOne.vue引入 

兄弟组件：ChildOne.vue

//template
send brother msg by pubsub

//script
import PubSub from 'pubsub-js'
	methods: {
	   pubsubBrotherMsg (){
	       PubSub.subscribe('pubsubMsg',this.commonMsg)
	   },
	}

2.在ChildTwo.vue引入

兄弟组件：ChildTwo.vue

import PubSub from 'pubsub-js'
   data(){
       return {
           pubsubMsg:''
       }
   },
 mounted() {
 	/*msg:回调函数第一个参数，必须传*/
	  PubSub.subscribe('pubsubMsg',(msg,data) => {
	      this.pubsubMsg = data
	  } )
  }

4 、通过Vuex通讯

Vuex是一个集中式的状态管理

详情请看：

几分钟明白Vuex的五大属性和使用方法https://blog.csdn.net/m0_64346035/article/details/124618468