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)
};

最终结果

相关推荐
Cacciatore->2 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~3 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo4 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
加油吧zkf9 分钟前
AI大模型如何重塑软件开发流程?——结合目标检测的深度实践与代码示例
开发语言·图像处理·人工智能·python·yolo
贵沫末23 分钟前
React——基础
前端·react.js·前端框架
ejinxian24 分钟前
PHP 超文本预处理器 发布 8.5 版本
开发语言·php
aklry35 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9342 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子42 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982443 分钟前
使用three.js实现3D地球
前端·three.js