关于Vue3中$refs的两种使用方式

前提条件：子组件必须暴露出可以调用的方法，父组件才能调用

方式一：使用ref()实现

父组件代码示例

<script setup>
import Children from "./Children.vue";
import {ref} from "vue";

// 注意名称要和子组件声明的 ref="childRef" 名称一致
const childRef = ref(null);

function click1() {
  // 调用子组件的方法
  childRef.value.say()
}
</script>

<template>
  <el-container>
    <el-main>

      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="click1">父调子方式一</el-button>
        </el-form-item>
      </el-form>

      <!-- 子组件 -->
      <children ref="childRef"/>

    </el-main>
  </el-container>
</template>

<style scoped>
</style>

方式二：使用getCurrentInstance()实现

父组件代码示例

<script setup>
import Children from "./Children.vue";
import {getCurrentInstance} from "vue";

// 引入proxy代替vue2中的this
const {proxy} = getCurrentInstance();

function click2() {
  // 调用子组件的open方法
  proxy.$refs.childRef.open()
}
</script>

<template>
  <el-container>
    <el-main>

      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="click2">父调子方式二</el-button>
        </el-form-item>
      </el-form>

      <!-- 子组件 -->
      <children ref="childRef"/>

    </el-main>
  </el-container>
</template>

<style scoped>
</style>

子组件代码示例

<script setup>
import {ElMessage, ElNotification} from 'element-plus'

const open = () => {
  ElNotification({
    title: '提示',
    message: '这是一个通知！',
  })
}

const say = () => {
  ElMessage({
    type: 'success',
    message: '这是一个弹框！',
    showClose: true,
  })
}

// 注意：子组件必须暴露方法，父组件才能调用成功
defineExpose({open, say})

</script>

<template>
  <el-container>
    <el-main>

      <el-card style="width: 100%;height: 450px">
        <h1>我是子组件</h1>

        <el-button plain @click="say">提示框</el-button>
        <el-button plain @click="open">通知框</el-button>
      </el-card>

    </el-main>
  </el-container>
</template>

<style scoped>
</style>