vue实现父子组件、兄弟组件间通信

这里是我随便写的一个案例，功能基本上已经实现，至于其他的求不深究^ _ ^
App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <blog-post :post="r_post"></blog-post>
  </div>
</template>

<script>
import Vue from 'vue';
//兄弟组件中传值两个组件中都得引入中转js
import transfer from './assets/transfer.js';
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      r_post:{
        title:'你好，vue',
        content: 'Welcome to Your test App',
        allData: ''
      }
    }
  }
}
//App.vue的子组件，blog-post-child的父组件
Vue.component('blog-post', {
  data: function(){
    return{
        broData: ''
    }
  },
  props: ['post','allData'],
  //props: {//props来接收数据的第二种方法
  //      post: {//post：Array,但传入的值类型不对时会报错
  //          type: Array,
  //          default: ['x','x','x'] //指定默认的值
  //      }
  //  }
  template: '<div><h3>{{ post.title }}</h3><div>{{post.content}}</div><blog-post-child @ievent="cEvent"></blog-post-child><div>{{ post.allData }}</div><blog-post-bro></blog-post-bro><div>兄弟组件:{{broData}}</div></div>',
  created(){//兄弟组件间传值接收的组件必须写在生命周期函数里
    var self=this;
    transfer.$on('click',function(data){//用$on为监听当前实例（此处当前实例为transfer）上的事件，回调函数会接收传入事件的参数
      self.broData=data;
    })
  },
  methods: {
    cEvent(data){// data为包含传过来所有数据的数组
        this.$parent.r_post.allData=data.a;
    }
  }
})
//blog-post的子组件
Vue.component('blog-post-child', {
  props: ['post'],
  template: '<button @click="iclick">子传父</button>',
  methods: {
     iclick(){
         let data = {
             a:'我是子组件，传入父组件'
         };
         this.$emit('ievent',data);//第一个参数为事件名称，第二个为传过去的参数
     }
  }
})
//blog-post的兄弟组件
Vue.component('blog-post-bro', {
  data: function(){
    return{}
  },
  template: '<button @click="trsFun">兄弟组件传值</button>',
  methods: {
    trsFun(){
      transfer.$emit('click','哥们儿，走一个');//用$emit为当前实例（此处当前实例为transfer）绑定一个事件传给监听器
    }
  }
})
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

transfer.js

import Vue from 'vue'
export default new Vue

在这里插入图片描述
总结：

父传子：
1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中绑定子组件props中创建的属性

子传父：
1.子组件中注册一个事件来触发一个该自定义事件，将需要传的值作为$emit的第二个参数，并作为实参传给响应自定义事件的方法；
2.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听（这里父组件同样需要一个事件来监听子组件注册的自定义事件，并在第二个参数上接受子组件传过来的参数）

兄弟组件：
1.创建中转总线，在src/assets/下创建一个transfer.js,只创建了一个新的Vue实例，起组件之间通信的桥梁作用；
2.在trsFun函数中用$emit触发了一个click事件，并传递了一个参数,$emit实例方法触发当前实例(此处的当前实例指向bus)上的事件,附加参数都会传给监听器回调；

3.$on监听当前实例上的事件(此处当前实例为transfer)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数$emit的额外参数

vue实现父子组件、兄弟组件间通信

猜你喜欢