Vue组件的通信

2023-05-13

Vue组件的通信

1.父子组件的通信

传递参数可以使用props，传递函数可以直接在调用子组件的时候传递自定义事件，并使用$emit来调用，例如：

  //父组件
<div classs="parent">
   <child @getinfo="myname" :userinfo="usermessage"></child>
 <div>
 export default {
     data(){
         return {
             usermessage:'我是父亲'
         }
     },
     methods:{
         myname(name){
             console.log('我的名字叫'+name)
         }
     }
 }
 
 
//子组件
<div classs="child">
   来源：{{userinfo}}
   <button @click="getname">显示我的名字</button>
 <div>
 export default {
     props:['userinfo'],
     methods:{
         getname(){
           this.$emit('getinfo','bilibili')
         }
     }
 }

2.兄弟组件通信

首先建立一个vue实例空白页（js文件）

1 2	import Vue from 'vue' export default new Vue()

组件a（数据发送方）通过使用 $emit 自定义事件把数据带过去


<template>
    <div>
        <span>A组件->{{msg}}</span>
        <input type="button" value="把a组件数据传给b" @click ="send">
    </div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
    data(){
        return {
            msg:{
                a:'111',
                b:'222'
            }
        }
    },
    methods:{
        send:function(){
            vmson.$emit("aevent",this.msg)
        }
    }
}
</script>

组件b（数据接收方）使用而通过 $on监听自定义事件的callback接收数据

<template>
 <div>
    <span>b组件,a传的的数据为->{{msg}}</span>
 </div>
</template>
<script>
      import vmson from "../../../util/emptyVue"
      export default {
         data(){
                return {
                    msg:""
                }
            },
         mounted(){
            vmson.$on("aevent",(val)=>{//监听事件aevent，回调函数要使用箭头函数;
               console.log(val);//打印结果：我是a组件的数据
               this.msg = val;
            })
          }
    }
</script>