VUE3.0使用ref 父组件调用子组件里的方法

父组件：
关键之处：必须将定义的ref，比如childRef，return出去，否则 childRef.value 为undefined

<template>
  <div id="parent">
    <div style="margin-top:100px" @click="showFn">
      父组件点击事件
    </div>
    <child ref="childRef"/>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import child from './common'
export default defineComponent({
  components: {
    child
  },
  setup() {
    const childRef = ref() // childRef 必须与 子组件child 定义的 ref="childRef" 一致
    const showFn = () => {
      childRef.value.show({msg: '传给子组件的参数'}) // 调用子组件中的show 
    }
    return {
      showFn,
      childRef // 注意：必须return出去，否则 childRef.value 为undefined
    }
  }
})
</script>

子组件：

<template>
  <el-dialog
    v-model="isShow"
    width="460px"
    @close="close"
    :append-to-body="false"
    :close-on-click-modal="false"
  >
    <div>我是父组件传过来的参数：{{msg}}</div>
  </el-dialog>
</template>

<script>
import {
  defineComponent,
  ref
} from 'vue'

export default defineComponent({
  setup() {
    const isShow = ref(false)
    const msg= ref('')
    const show = (params) => {
      isShow.value = true
      msg.value = params.msg|| ''
    }
    const close = () => {
      isShow.value = false
    }
  
    return {
      isShow,
      msg,
      show,
      close
    }
  }
})
</script>