vue组件通信那些事儿

时间：2021-02-16 06:33:42

一、说说通信

通信，简言之，交流信息。交流结束后，把信息放在哪里，这是一个值得思考的问题。vue中保存状态有2种方式，组件内的data属性和组件外的vuex的state属性。

1、用state的场景

vuex解决多组件共享数据和组件间通信问题；

全局共享的状态，放在state中；

后端返回的数据，放在state中；

处理数据修改数据，放在state中。

2、用data的场景

数据渲染页面，放在data中；

页面中不需要持久化的数据，放在data中。

二、父子组件间通信

1、父组件给子组件传消息

//父组件，给子组件的props值赋值
<com-a ftoa="一朵花"></com-a>

Vue.component('com-a',{
   //全局注册子组件A
})
//子组件
<h3>父亲给我了，{{ ftoa }}</h3>

props:['ftoa']

2、子组件给父组件传事件

//子组件
<input type="button" value="A和父亲说话" @click="eventAf">

methods:{
    eventAf(){
      this.$emit('a-f-msg',this.a);
    }
  }
//父组件，用v-on监听子组件
<com-a v-on:a-f-msg="listenToa"></com-a>
<h3>子组件A想告诉父亲，{{ tofather.aword }}</h3>

methods:{
    listenToa(adata){
      this.tofather.aword = adata;
    }
  }

三、兄弟组件间通信

//事件总线
const bus= new Vue();

1、子组件A给子组件B发事件

//子组件A
<input type="button" value="把值传给B" @click="eventAb">

methods:{
    eventAb(){
      bus.$emit('a-b-msg',this.a);
    }
  }

2、子组件B监听接收子组件A发的事件

//子组件B
<h4>A传过来的数据是：{{ a }}</h4>

mounted(){
    var _this = this;
    bus.$on('a-b-msg',(a)=>{
      _this.a = a;
    });
  }

3、vuex

适用于复杂的组件通信。

四、前往代码

1、简单的组件通信（vue）

2、简单的组件通信（vue单文件组件）

3、复杂的组件通信（vue）

4、复杂的组件通信（vue单文件组件）

五、底层原理

相关文章