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

风於尘

已于 2024-05-26 23:08:15 修改

阅读量6k

点赞数 14

分类专栏： vue3 文章标签： javascript vue.js 前端 vue elementui

于 2024-05-26 12:33:53 首次发布

本文链接：https://blog.csdn.net/fyx_demo/article/details/139213149

版权

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

方式一：使用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>
<