Vue-组件通信

一、父子间组件通信

1. $emit和props

• 父传子

/*
父组件使用子组件，并通过v-bind传递数据到子组件
*/
<son-component :faData={"name":"tony","age":18}></son-component>
/*
子组件通过props接受父组件数据
*/
props:{
faData:{type:Object}
}

• 子传父

/*
子组件通过$emit注册事件并传数据到父组件
*/
<div @clickMe="clickMe"></div>

clickMe(){
this.$emit("clicckSon",this.dataToFa)
}
/*
父组件使用子组件，并通过v-bind传递数据到子组件
*/
<son-component :faData={"name":"tony","age":18} @clicckSon="clicckSon"></son-component>
clicckSon(dataFormSon){
    console.log(dataFormSon)
}

注：不建议修改props接收的数据，修改的话可在data中引用该数据后进行修改

2.$parent，$children和$ref

• 父传子

/*
父组件使用子组件，并通过\$children获取到vdom传递数据到子组件
*/
<div @click="clickFa"></div>
<son-component></son-component>
clickFa(){
     this.$children[0].msg = '父组件传过来的值';
}
/*
子组件需要声明该变量
*/
data(){
    return {
    msg:"我是子组件"
    }
}

• 子传父

/*
子组件通过\$parent获取到vdom传递数据到子组件
*/
<p @click="toFa">{{ msg }}</p>
toFa(){
     this.$parent.msg = '子组件传过来的值';
}
/*
父组件需要声明该变量
*/
data(){
    return {
    msg:"我是父组件"
    }
}

• $ref

/*
父组件使用$ref传递数据到子组件
*/
<div @click="clickFa"></div>
<son-component ref="son"></son-component>
clickFa(){
      this.$refs['son'].msg = '通过ref传的值';
}
/*
子组件需要声明该变量
*/
data(){
    return {
    msg:"我是子组件"
    }
}

注： this.$children是一个数组，顺序无法保证

二、非父子间组件通信

1. 通过父子间通信传递

2. EventBus

可进行不同组件间通信

//main.js
Vue.prototype.$bus = new Vue();
//接收数据文件中
 this.$bus.$on('clickBus', (data) => {
        this.dataProps.title = data;
    });
//传递数据文件中
  <div @click="clickBus"></div>
   busClick() {
                this.$bus.$emit('clickBus', '触发了bus');
               }

3. Vuex

全局状态管理器，暂不详细说明