vue3子组件使用父方法

在Vue3中，子组件可以使用父组件的方法有几种方式。

第一种方式是通过props传递父组件的方法给子组件。父组件中定义一个方法，并将该方法作为props传递给子组件。在子组件中，可以直接调用父组件传递的方法。例如，父组件可以这样定义：

<my-child :xx="xx"></my-child>

子组件可以这样接收并调用父组件的方法：

props: ['xx'],
methods: {
  fnxx() {
    this.xx(); // 调用父组件传递的方法
  }
}

第二种方式是使用emit方法来触发父组件中的方法。在父组件中，可以定义一个供子组件调用的方法，并使用`@update:xx`来监听子组件触发的事件。子组件通过`context.emit`方法来触发父组件的方法。例如，父组件可以这样定义：

<my-child @update:xx="xx"></my-child>

子组件可以这样调用父组件的方法：

setup(props, context) {
  function fnxx() {
    context.emit('update:xx'); // 触发父组件的方法
  }
  return { fnxx };
}

以上是两种常用的方式来实现子组件使用父组件的方法。根据具体的需求和场景，选择合适的方式来传递和调用父组件的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [[vue3] 子组件调用父组件的多种方法](https://blog.csdn.net/wyy7293/article/details/123918547)[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 ]