vue 父组件调用子组件事件

在Vue中，父组件可以通过$emit方法来调用子组件的事件。首先，在子组件中，我们可以使用this.$on来监听事件，并在回调函数中处理相应的逻辑。在父组件中，我们可以通过使用$refs来获取子组件的引用，并通过该引用来调用子组件的方法或者触发子组件的事件。

一个示例代码如下：

父组件代码：

<template>
  <div>
    <div @click="click">点击父组件</div>
    <child ref="child"></child>
  </div>
</template>

<script>
import child from "./child";

export default {
  methods: {
    click() {
      this.$refs.child.$emit('childMethod','发送给方法一的数据') // 方法1:触发监听事件
      this.$refs.child.callMethod() // 方法2:直接调用
    },
  },
  components: {
    child,
  }
}
</script>

子组件代码：

<template>
  <div>
    子组件
  </div>
</template>

<script>
export default {
  mounted() {
    this.monitoring() // 注册监听事件
  },
  methods: {
    monitoring() {
      this.$on('childMethod', (res) => {
        console.log('方法1:触发监听事件监听成功')
        console.log(res)
      })
    },
    callMethod() {
      console.log('方法2:直接调用调用成功')
    },
  }
}
</script>

在这个示例中，当父组件被点击时，会调用click方法。在click方法中，通过this.$refs.child.$emit来触发子组件的事件，并传递相应的数据。同时，也通过this.$refs.child.callMethod来直接调用子组件的方法。子组件中，通过this.$on来监听事件，并在回调函数中处理逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue父组件调用子组件事件的两种方法](https://blog.csdn.net/fhjdzkp/article/details/110082729)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]