vue 父组件传事件给子组件

在Vue中，父组件可以通过使用props将数据传递给子组件，而子组件可以通过使用事件向上传递信息给父组件。具体步骤如下：

1. 在父组件中，通过props数组将数据传递给子组件。例如：

<template>
  <div class="parent">
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleChildEvent(payload) {
      console.log(payload);
    }
  }
};
</script>

2. 在子组件中，通过props接收父组件传递的数据，并使用$emit方法触发事件向上传递信息给父组件。例如：

<template>
  <div class="child">
    <p>{{ message }}</p>
    <button @click="emitEvent">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: \['message'\],
  methods: {
    emitEvent() {
      this.$emit('childEvent', 'Hello from child');
    }
  }
};
</script>

在这个例子中，父组件通过props将数据`parentMessage`传递给子组件，并在子组件中使用`message`接收。子组件通过点击按钮触发`emitEvent`方法，该方法使用`$emit`触发名为`childEvent`的事件，并传递信息给父组件。父组件通过`@childEvent`监听子组件触发的事件，并在`handleChildEvent`方法中处理传递的信息。

这样，父组件就成功地将事件传递给了子组件。
#### 引用[.reference_title]
- *1* *2* *3* [vue 父组件和子组件传值/传递事件/调用事件](https://blog.csdn.net/weixin_43867303/article/details/96613525)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]