vue 子组件

<template>
  <div>
    <!-- 父组件 -->
    <h1>父组件</h1>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

<script>
// 引入子组件
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    };
  },
  methods: {
    handleChildEvent(childMsg) {
      console.log('子组件触发的事件:', childMsg);
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

<template>
  <div>
    <!-- 子组件 -->
    <h2>子组件</h2>
    <p>{{ message }}</p>
    <button @click="sendEventToParent">发送事件给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  methods: {
    sendEventToParent() {
      // 触发自定义事件，传递消息给父组件
      this.$emit('childEvent', '子组件的消息');
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

解释说明：

1. 父组件 (ParentComponent):

   • 使用 <ChildComponent> 标签引入子组件。
   • 通过 props 向子组件传递数据（如 message）。
   • 监听子组件触发的自定义事件（如 childEvent），并通过方法处理这些事件。

2. 子组件 (ChildComponent):

   • 接收来自父组件的 props 数据（如 message）并在模板中使用。
   • 定义了一个按钮，点击时触发自定义事件 childEvent，并将消息传递给父组件。

通过这种方式，父组件和子组件之间可以实现双向通信。