从零开始的 Vue 组件通信方式详解

2024-01-02 11:14:52

Vue.js 是当下前端开发领域非常热门的一个 MVVM 框架，也是组件化开发的代表。在 Vue.js 中，组件是构成应用程序的基本单元。Vue.js 中的组件具有树形结构，每个组件都可以有子组件。组件之间可以通过多种方式进行通信，包括父子组件通信、兄弟组件通信、祖孙组件通信、非父子组件通信。

父子组件通信

父子组件通信是最常见的一种组件通信方式。父组件可以通过 props 向子组件传递数据，子组件可以通过 emit 向父组件发送事件。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New message')
    }
  }
}
</script>

兄弟组件通信

兄弟组件通信是指两个没有父子关系的组件之间的通信。兄弟组件通信可以通过事件总线或状态管理工具来实现。

<!-- 兄弟组件 A -->
<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$EventBus.$emit('update-message', 'New message')
    }
  }
}
</script>

<!-- 兄弟组件 B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$EventBus.$on('update-message', (newMessage) => {
      this.message = newMessage
    })
  }
}
</script>

祖孙组件通信

祖孙组件通信是指祖组件和孙组件之间的通信。祖孙组件通信可以通过父子组件通信来实现。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <grandchild-component :message="message" @update-message="updateMessage"></grandchild-component>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage(newMessage) {
      this.$emit('update-message', newMessage)
    }
  }
}
</script>

<!-- 孙组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New message')
    }
  }
}
</script>

非父子组件通信

非父子组件通信是指两个没有任何关系的组件之间的通信。非父子组件通信可以通过事件总线或状态管理工具来实现。

<!-- 组件 A -->
<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$EventBus.$emit('update-message', 'New message')
    }
  }
}
</script>

<!-- 组件 B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$EventBus.$on('update-message', (newMessage) => {
      this.message = newMessage
    })
  }
}
</script>