Vue 组件传值：全面解析三种方式，让数据交流更顺畅

2023-09-18 16:02:55

在 Vue.js 中，组件化开发是构建复杂应用程序的利器。组件之间的通信对于实现数据的共享和交互至关重要。本文将详细探讨 Vue 组件传值的三个主要方式：父传子、子传父和非父子传值，帮助您轻松实现组件间的数据传递。

父传子：从上往下，传递数据

在父传子方式中，父组件将数据通过 props 传递给子组件。Props 是只读的属性，子组件可以通过它来访问父组件传递的数据。父组件可以通过 v-bind 指令来绑定 props，子组件则通过 props 属性来接收数据。例如：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

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

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

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

在上面的示例中，父组件通过 v-bind 指令将 message 数据传递给了子组件。子组件可以通过 props.message 来访问这个数据，并在模板中显示出来。

子传父：从下往上，发送消息

在子传父方式中，子组件通过事件向父组件发送消息。子组件可以通过 $emit 方法来触发事件，父组件可以通过 v-on 指令来监听事件并作出响应。例如：

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

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

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @message="handleMessage" />
  </div>
</template>

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