vue中组件通信的三种方式/组件事件事件传递

                                   欢迎微信关注Jerome blog，用技术的心去生活

vue中组件通信的三种方式

一、父组件向子组件通信：

1、通信方式：props

2、代码示例：

父组件页面：father.vue

<template>
  // v-bind来绑定动态数据，静态数据可以不用v-bind指令(:是v-bind的简写)
  <child-component :message='message'></child-component>
</template>
<script>
import child from 'child.vue';
export default {
  name: "father",
  data() {
    return {
      message: 'hello'
    }
  },
  components: {
    'child-component': child
  }
}
</script>

子组件页面：child.vue

<template>
  <div class='child'>{{ message }}</div>
</template>

<script>
export default {
  name: "child",
  props: ['message']
}
</script>

3、tips:

（1）、prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

（2）、每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

二、子组件向父组件通信：

1、通信方式：父组件监听事件的触发($on)，子组件手动触发事件($emit)。

2、代码示例：

父组件页面：father.vue

 

<template>
  // 父组件监听listenChild事件，执行getChildData方法，并且拿到传递过来的数据(@是v-on的简写)
  <child-component @listenToChild='getChildData'></child-component>
</template>

<script>
import child from 'child.vue';
export default {
  name: "father",
  methods: {
    getChildData (val) {
      console.log(`子组件传递过来的数据: ${val}`); // hello
    }
  },
  components: {
    'child-component': child
  }
}
</script>

子组件页面：child.vue

<template>
  <div class='child'></div>
</template>

<script>
export default {
  name: "child",
  created () {
    // 在需要的传递数据的时候调用sendData方法，这里模拟调用
    this.sendData();
  },
  methods: {
    sendData () {
      this.$emit('listenToChild', 'hello');
    }
  }
}
</script>

三、兄弟组件相互通信

1、通信方式：定义一个vue实例的bus,又名事件车，或中继器，或事件分发器等等，使用触发$emit和监听$on实现。

2、代码示例：

定义vues实例bus:bus.js

 

import Vue from 'vue';
export default new Vue;

A页面：a.vue（发送）

<template>
  <div class='a'></div>
</template>

<script>
import Bus from 'bus.js' ;
export default {
  name: "a",
  created() {
    // 在需要的传递数据的时候调用sendData方法，这里模拟调用
    this.sendData();
  },
  methods: {
    sendData () {
      Bus.$emit('listenToA', 'hello');
      //listenToA是监听事件名，hello是参数
    }
  }
}
</script>

 B页面：b.vue(接收)

<template>
  <div class='b'></div>
</template>

<script>
import Bus from 'bus.js';
export default {
  name: "b",
  monted() {
    Bus.$on('listenToA',(res)=>{
        console.log(res)
        //res表示接收到的监听的事件传递的数据
    });
  },
  methods: {
    
  },
  beforeDestroy(){
    //页面销毁前移除监听  
    Bus.$off('listenToA')
  },
}
</script>

3、tips:

在a b两个页面都要引入bus.js这个事件车