Vue3父组件如何访问子组件属性和方法

本篇内容主要是父组件如何访问子组件的属性和方法

文章目录


子组件

javascript 复制代码
//son.vue代码

const list = (info) =>{
    console.log(info)
}

const name = ref("XXXX")

//子组件向父组件暴露了一个方法,然后父组件就可以去使用子组件里面的一些属性和方法了
//子组件向父组件暴露了一个参数,一个方法
defineExpose({ show ,list,name});

父组件

javascript 复制代码
//引入子组件
<son ref="deliverRef">
    
</son>
const deliverRef = ref();

//父组件在点击按钮的时候就可以拿到子组件的属性和方法
const btnClick = () => {
  deliverRef.value.list("helloWorld")
  console.log(deliverRef.value.name)
};

最终结果

相关推荐
tyler_download5 分钟前
golang 实现比特币内核:实现基于椭圆曲线的数字签名和验证
开发语言·数据库·golang
小小小~6 分钟前
qt5将程序打包并使用
开发语言·qt
hlsd#6 分钟前
go mod 依赖管理
开发语言·后端·golang
小春学渗透8 分钟前
Day107:代码审计-PHP模型开发篇&MVC层&RCE执行&文件对比法&1day分析&0day验证
开发语言·安全·web安全·php·mvc
四喜花露水9 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
杜杜的man10 分钟前
【go从零单排】迭代器(Iterators)
开发语言·算法·golang
亦世凡华、11 分钟前
【启程Golang之旅】从零开始构建可扩展的微服务架构
开发语言·经验分享·后端·golang
前端Hardy18 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
测试界的酸菜鱼25 分钟前
C# NUnit 框架:高效使用指南
开发语言·c#·log4j
GDAL25 分钟前
lua入门教程 :模块和包
开发语言·junit·lua