组件传值：父传子、子传父

2023-08-20 13:25:32

组件传值：Vue.js 中数据在组件之间的流畅流动

在 Vue.js 中，组件是构建复杂应用程序的核心模块。组件之间的有效通信对于创建动态且交互式用户界面至关重要。组件传值使组件能够交换数据，从而协调其行为并保持应用程序状态的一致性。

父传子

父组件将数据传递给子组件是一种单向数据流模式。在父组件中，我们使用 props 属性定义要传递的数据。子组件通过 prop 属性接收这些数据。

<!-- 父组件 -->
<template>
  <child-component :message="messageFromParent"></child-component>
</template>

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

<!-- 子组件 -->
<template>
  <p>{{ messageFromChild }}</p>
</template>

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

在上面的示例中，父组件 messageFromParent 将数据传递给子组件。子组件可以通过 messageFromChild prop 访问此数据。

子传父

与父传子相反，子传父是数据从子组件流向父组件的模式。在子组件中，我们使用 $emit 方法触发事件并传递数据。父组件通过监听子组件触发的事件来接收数据。

<!-- 子组件 -->
<template>
  <button @click="sendMessageToParent">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('message-from-child', 'Hello from child!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @message-from-child="receiveMessageFromChild"></child-component>
</template>

<script>
export default {
  methods: {
    receiveMessageFromChild(message) {
      console.log(message) // 'Hello from child!'
    }
  }
}
</script>