vue3ts父组件调用子组件方法

在Vue 3中，要实现父组件调用子组件的方法，可以通过使用`ref`和`provide/inject`来实现。

在父组件中，首先需要导入子组件并定义一个`ref`，然后在模板中通过`v-bind`将子组件的方法绑定到父组件的方法上。接下来，通过调用`ref.value`来触发子组件的方法。

下面是一个示例代码：

<template>
  <Child :childMethod="childMethod" />
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const childMethod = ref(null);
</script>

// Child.vue
<template>
  <div>
    我是子组件
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';

const childMethod = ref((message) => {
  console.log('子组件的方法被调用了:', message);
});

provide('childMethod', childMethod);
</script>

在子组件中，首先需要导入`inject`，然后使用`inject('childMethod')`来获取父组件传递的方法。接下来，就可以在子组件中调用该方法了。

下面是一个示例代码：

<template>
  <div>
    <button @click="callParentMethod">调用父组件的方法</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const childMethod = inject('childMethod');

const callParentMethod = () => {
  childMethod('Hello from child component');
};
</script>

这样，父组件就可以通过调用子组件的方法来实现与子组件的交互了。<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/weixin_55992854/article/details/129029989)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]