vue2和vue3中 ref/refs 使用示例

举例的都是方法，参数的话是大同小异，可以自己动手试试！

vue2中父组件使用子组件方法参数


// 父组件
<template>
    <div>
        <head ref="headchild"/>
    </div>
</template>
<script>
import head from "./head";
 
export default {
    methods: {
        getList(){
            this.$refs.headchild.init()
        }
    }
}
<script/>
 
// 子组件
<template>
    <div></div>
</template>
<script>
 
export default {
    methods: {
        init(){
            console.log('zxc')
        }
    }
}
<script/>

vue3中父组件使用子组件方法参数


// 父组件
<template>
     <head ref="headchild"/>
</template>
 
<script setup>
import head from "./head";
import { ref } from "vue";
const headchild= ref(null);
const getList = () => {
   headchild.value.init()
}
<script/>
 
// 子组件
<template>
    <div></div>
</template>
<script setup>
const init = () => {
   console.log('zxc')
}
defineExpose({
  init,
});
<script/>

相关阅读:
Biome 1.7 发布，支持从 ESLint 和 Prettier 迁移
spark知识点总结（1）
代码随想录算法训练营19期第45天
【无线传感器】基于Matlab实现WSN 查找两个节点之间的最短路径并发送数据
STM32H743的FDCAN使用方法（2）：STM32CubeMX初始化代码修改
【Java】想进大厂？你应该知道的算法经典习题(一)
小程序列表下拉刷新和加载更多
手摸手Redis7配置哨兵模式(一主二从三哨兵)
如何通过C#/VB.NET从PowerPoint文档中提取图片
Kafka关键点总结-消息的顺序性

原文地址：https://blog.csdn.net/Frazier1995/article/details/133275840