vue3父组件调用子组件方法和值

1.组合式API

步骤一、父组件：子组件用ref绑定值

<template>
    <div>
      <button @click='next'/>
      <verifyPhoneNumber  v-if="steps[current].type == 'verifyPhoneNumber'"
        ref="registerComp"
       />
    </div>
</template>
<script lang="ts" setup name="SassRegister">
  const next = () => {
    const data=registerComp.value.data
    registerComp.value.registerFn();
  };

</script>

步骤二、子组件：使用defineExpose暴露方法和值

<template>
    <div>
        <p>子组件</p>
        <button :model='data'/>
    </div>
</template>
<script lang="ts" setup name="SassRegister">

  const data=ref()

  const registerFn = () => {
    console.log('要被调用的子组件方法');
  };

  defineExpose({
    data,
    registerFn,
  });

</script>

2.选项式API

步骤一、父组件使用ref绑定