父子组件传值，一键掌握！

在 Vue 中，父子组件之间的传值是十分常见的。父子组件传值是指父组件将数据传递给子组件，或者子组件将数据传递给父组件。这种传值方式可以帮助我们在组件之间共享数据，从而实现组件间的交互。

父组件向子组件传值

父子组件传值最常用的方式是父组件通过 props 向子组件传递数据。props 是一个特殊的属性，它允许父组件向子组件传递数据。在父组件中，我们可以通过 props 来定义需要传递给子组件的数据，而在子组件中，我们可以通过 props 来接收这些数据。

例如，在父组件中，我们可以定义一个名为 message 的 prop：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

在子组件中，我们可以通过 props 来接收这个数据：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

这样，子组件就可以通过 this.message 来访问父组件传递过来的数据了。

子组件向父组件传值

子组件向父组件传值可以使用 emit 事件。emit 事件允许子组件向父组件触发一个事件，并在事件中传递数据。在子组件中，我们可以通过 $emit 来触发一个名为 updateMessage 的事件，并在事件中传递一个新的消息：

<template>
  <div>
    <input v-model="message">
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

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

在父组件中，我们可以通过 v-on 来监听这个事件，并在事件中接收子组件传递过来的数据：

<template>
  <div>
    <child-component @updateMessage="updateMessage"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

这样，父组件就可以通过 this.message 来访问子组件传递过来的数据了。

非父子组件传值

非父子组件之间的传值可以使用事件总线。事件总线是一个全局的事件对象，它允许组件之间进行通信，即使这些组件不是父子组件关系。

在 Vue 中，我们可以使用 Vuex 来实现事件总线。Vuex 是一个状态管理工具，它允许我们在组件之间共享数据。我们可以通过 Vuex 来定义一个名为 message 的状态，并在组件中通过 mapState 和 mapActions 来访问和修改这个状态。

例如，在组件 A 中，我们可以通过 mapState 来访问 message 状态：

export default {
  computed: {
    ...mapState(['message'])
  }
}

在组件 B 中，我们可以通过 mapActions 来修改 message 状态：

export default {
  methods: {
    ...mapActions(['updateMessage'])
  }
}

这样，组件 A 和组件 B就可以通过 Vuex 来共享 message 状态，从而实现非父子组件之间的传值。

总结

Vue 中的组件传值有多种方式，包括父组件向子组件传值、子组件向父组件传值、非父子组件传值。这些传值方式可以帮助我们在组件之间共享数据，从而实现组件间的交互。