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

最终结果

相关推荐
Mintopia5 分钟前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia7 分钟前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso7 分钟前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
少年阿闯~~14 分钟前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher16 分钟前
CSS 继承 (Inheritance)
前端·css
祈祷苍天赐我java之术23 分钟前
Vue 整体框架全面解析
前端·javascript·vue.js
Pocker_Spades_A1 小时前
Python快速入门专业版(二十六):Python函数基础:定义、调用与返回值(Hello函数案例)
开发语言·python
洛小豆1 小时前
Git 打标签完全指南:从本地创建到远端推送
前端·git·github
island13141 小时前
【C++框架#5】Elasticsearch 安装和使用
开发语言·c++·elasticsearch
世间小小鱼1 小时前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws