vue2中父子组件传值案例总结

在 Vue 2 中，父子组件之间的传值是通过 props 和事件来实现的。下面是详细的解释和总结：

1. 父组件向子组件传值

父组件可以通过 props 向子组件传递数据。以下是一个简单的示例：

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './Child.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    }
  }
}
</script>

子组件 (Child.vue)

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: false, // 不是必需的
      default: '默认消息' // 设置默认值
    }
  }
}
</script>

2. 子组件向父组件传值

子组件可以通过 $emit 方法向父组件发送事件，父组件可以监听这个事件并处理数据。以下是示例：

子组件 (Child.vue)

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageFromChild', 'Hello from Child!');
    }
  }
}
</script>

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <child-component @messageFromChild="receiveMessage"></child-component>
    <p>收到的消息: {{ receivedMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './Child.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    receiveMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

总结

• 父组件向子组件传值：使用 props。父组件定义数据并将其作为属性传递给子组件。
• 子组件向父组件传值：使用自定义事件。子组件通过 $emit 发送事件，父组件通过 v-on 或 @ 监听这些事件并处理传递的数据。
• 单向数据流：在 Vue 中，数据流是单向的，父组件的数据流向子组件，而子组件通过事件向父组件发送信息。

这种父子组件间的通信方式使得组件之间的关系清晰，便于维护和扩展。