Vue实现父子组件的事件传递的示例代码

<!-- Parent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <child @childClicked="handleChildClick" />
    <p v-if="message">{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleChildClick(message) {
      this.message = message;
      console.log('父组件收到的消息:', message);
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <button @click="sendEvent">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendEvent() {
      this.$emit('childClicked', '子组件传递的消息');
    }
  }
};
</script>

<!-- Parent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <child :message="parentMessage" @childClicked="handleChildClick" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    };
  },
  methods: {
    handleChildClick(message) {
      console.log('父组件收到的消息:', message);
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendEvent">点击我</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    sendEvent() {
      this.$emit('childClicked', '子组件传递的消息');
    }
  }
};
</script>