vue父子组件传值props

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <p>来自子组件的消息: {{ childMessage }}</p>
    <ChildComponent :parentMessage="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是来自父组件的消息',
      childMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>子组件</h2>
    <p>来自父组件的消息: {{ parentMessage }}</p>
    <button @click="sendMessageToParent">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    parentMessage: String
  },
  methods: {
    sendMessageToParent() {
      const message = '这是来自子组件的消息';
      this.$emit('childEvent', message);
    }
  }
};
</script>

解释说明

1. 父组件 (ParentComponent.vue):

   • 父组件通过 props 将数据传递给子组件。在本例中，父组件通过 :parentMessage="parentMessage" 将 parentMessage 数据传递给子组件。
   • 父组件监听子组件发出的事件 (@childEvent="handleChildEvent") 并处理子组件传递过来的消息。

2. 子组件 (ChildComponent.vue):

   • 子组件通过 props 接收父组件传递的数据 (parentMessage)。
   • 子组件通过 $emit 方法触发自定义事件 (childEvent) 并将消息传递回父组件。

3. 双向通信:

   • 父组件向子组件传递数据，子组件通过事件将数据反馈给父组件，实现了父子组件之间的双向通信。