Vue组件通信详解

Vue组件通信详解

在Vue开发中，一个页面往往由多个组件组成。而这些组件之间的通信是Vue开发中非常关键的部分。本文将介绍Vue中组件之间的通信方式。

1、props和$emit

//父组件
<template>
  <div>
    <child :message="message" @update-message="updateMessage" />
  </div>
</template>

<script>
import child from './child.vue'
export default {
  data() {
    return {
      message: 'hello Vue'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  },
  components: {
    child
  }
}
</script>

//子组件
<template>
  <div>
    {{ message }}
    <button @click="changeMessage">改变父组件的message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    changeMessage() {
      this.$emit('update-message', '你好Vue')
    }
  }
}
</script>

2、$attrs和$listeners

//父组件
<template>
  <div>
    <child name="name1" age="18" @eventName="eventName"></child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  components: {
    child
  },
  methods: {
    eventName(e) {
      console.log(e)
    }
  }
}
</script>

//子组件
<template>
  <div>
    <p>{{ name }} : {{ age }}</p>
    <button @click="$emit('eventName', '我是子组件传出去的数据')">点击传出数据</button>
  </div>
</template>

<script>
export default {
  inheritAttrs: false, // 不继承父组件的属性
  props: ['name', 'age'], // 父组件传递的props
  mounted() {
    console.log(this.$attrs) // 打印父组件传递的所有属性
    console.log(this.$listeners) // 打印父组件传递的所有事件
  }
}
</script>

3、eventBus

// eventBus.js
import Vue from 'vue'
export default new Vue()

// a.vue
<template>
  <div>
    <button @click="click">触发事件</button>
  </div>
</template>

<script>
import eventBus from './eventBus'
export default {
  methods: {
    click() {
      eventBus.$emit('eventName', 'hello world')
    }
  }
}
</script>

// b.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import eventBus from './eventBus'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    eventBus.$on('eventName', message => {
      this.message = message
      console.log(message)
    })
  }
}
</script>

总结：以上三种方式都是Vue组件通信的常用方式，根据不同的场景选择不同的方式即可。