揭开Vue父子组件传值的秘密，打造高效沟通

2024-01-24 10:58:34

属性传递：从父到子组件的单向数据流

在Vue中，父子组件之间的通信可以通过属性传递来实现。父组件通过在子组件的标签中设置属性，将数据从父组件传递给子组件。子组件通过props定义与父组件传入属性相同的变量，在组件内部就可以访问父组件传递的数据。

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

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

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

在上面的示例中，父组件通过<ChildComponent :message="message">将message数据传递给子组件。子组件通过props: ['message']定义message属性，在组件内部就可以通过this.message访问父组件传递的数据。

2. 事件传递：从子组件到父组件的单向数据流

父子组件之间的通信还可以通过事件传递来实现。子组件通过触发自定义事件，将数据从子组件传递给父组件。父组件通过监听子组件定义的事件，在事件被触发时获取子组件传递的数据。

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

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

<!-- 父组件 -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

在上面的示例中，子组件通过<button @click="handleClick">点击我</button>定义了一个handleClick方法，当按钮被点击时触发该方法。在handleClick方法中，子组件通过this.$emit('custom-event', 'Hello from child component!')触发了名为custom-event的自定义事件，并传递了一个字符串"Hello from child component!"作为事件参数。

父组件通过<ChildComponent @custom-event="handleCustomEvent" />监听了子组件定义的custom-event事件。当子组件触发该事件时，父组件的handleCustomEvent方法会被调用，并且可以从事件参数中获取子组件传递的数据。