Vue组件通信秘籍：揭秘三大法宝

2022-12-24 05:17:11

Vue组件通信：数据流动的艺术

父子组件通信：亲密无间的血脉相连

父子组件通信是Vue中最基本、最直接的组件通信方式。在这个亲密的家庭关系中，父组件扮演着数据提供者的角色，通过props将数据传递给子组件。而子组件则像一个乖巧的孩子，通过emit将事件发送回父组件。

应用场景： 当父组件需要将数据传递给子组件时，比如一个用户列表或一个表单模型。

实现方式： 在父组件中使用props声明要传递的数据，然后在子组件中通过props接收这些数据。对于事件的触发，子组件使用emit发送事件，父组件使用监听器监听这些事件。

代码示例：

// 父组件
<template>
  <child-component :users="users" @button-clicked="handleButtonClick" />
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'John Doe', age: 25 },
        { name: 'Jane Smith', age: 30 }
      ]
    }
  },
  methods: {
    handleButtonClick() {
      // 当子组件按钮被点击时触发
    }
  }
}
</script>

// 子组件
<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  props: ['users'],
  methods: {
    handleClick() {
      this.$emit('button-clicked')
    }
  }
}
</script>

子父组件通信：逆流而上的信息传递

子父组件通信与父子组件通信相反，它允许子组件通过emit向父组件发送事件。父组件就像一个睿智的长辈，聆听子组件的声音，并在需要时提供指导。

应用场景： 当子组件需要向父组件报告某个事件时，比如一个表单提交或一个数据更新。

实现方式： 子组件使用emit发送事件，父组件使用监听器监听这些事件。

代码示例：

// 子组件
<template>
  <form @submit="handleSubmit">
    <input type="text" v-model="message" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('message-submitted', this.message)
    }
  }
}
</script>

// 父组件
<template>
  <child-component @message-submitted="handleMessageSubmitted" />
</template>

<script>
export default {
  methods: {
    handleMessageSubmitted(message) {
      // 当子组件提交表单时触发
    }
  }
}
</script>

兄弟组件通信：比邻而居的默契交流

兄弟组件通信是Vue中一种更高级的通信方式。它允许兄弟组件之间通过一个共同的媒介（事件总线）进行通信，就像两个邻居之间架起了一座友谊之桥。

应用场景： 当两个兄弟组件需要相互传递信息或协调操作时，比如一个组件需要更新另一个组件中的数据。

实现方式： 创建一个事件总线实例，然后在需要通信的组件中分别监听和触发事件总线中的事件。

代码示例：

// 事件总线
export const eventBus = new Vue()

// 兄弟组件1
<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      eventBus.$emit('button-clicked')
    }
  }
}
</script>

// 兄弟组件2
<template>
  <p>收到消息：{{ receivedMessage }}</p>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  mounted() {
    eventBus.$on('button-clicked', (message) => {
      this.receivedMessage = message
    })
  }
}
</script>