vue3 夫组件调用子组件方法

在 Vue3 中，父组件调用子组件方法通常通过 props、事件（$emit）或者自定义的 ref 来实现。以下是几种常见的方法：

1. **通过 props**：如果子组件需要暴露某个方法供父组件调用，可以在子组件的 `methods` 中定义这个方法，并将它作为 prop 传递给父组件。在父组件里，可以直接通过 prop 名称来调用子组件的方法。

// 子组件.vue
<template>
  <button @click="$emit('callChildMethod', 'someData')">调用子方法</button>
</template>

<script setup>
export default {
  methods: {
    someMethod(data) {
      // 子方法逻辑...
    }
  },
  // 父组件可以通过props来接收并调用此方法
  props: ['callChildMethod']
};
</script>

// 父组件.vue
<template>
  <ChildComponent :call-child-method="handleMethod"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
const ChildInstance = ref(null);

setup() {
  function handleMethod(data) {
    ChildInstance.value.someMethod(data);
  }
}
</script>

2. **通过事件（$emit）**：子组件通过 `$emit` 触发一个自定义事件，然后父组件监听这个事件并在接收到数据后调用对应的方法。

// 子组件.vue
<template>
  <button @click="triggerMethod">触发方法</button>
</template>

<script setup>
function triggerMethod() {
  $emit('parentCallMethod', 'data');
}
</script>

// 父组件.vue
<template>
  <ChildComponent @parent-call-method="handleParentMethod"></ChildComponent>
</template>

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

setup() {
  const handleParentMethod = (data) => {
    // 调用处理函数
  };
}
</script>

3. **通过ref**：如果子组件内部有状态，父组件可以使用 `ref` 监听子组件实例的变化，然后在适当的时候调用子组件的方法。

// 子组件.vue
<template>
  <input v-model="value" />
  <button @click="changeValue">改变值</button>
</template>

<script setup>
const value = ref('');
function changeValue() {
  // 更新值...
}
</script>

// 父组件.vue
<template>
  <ChildComponent :value="parentValue" @update-value="handleChange"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
let parentValue = ref('');

function handleChange(newValue) {
  parentValue.value = newValue;
}
</script>