vue3父组件使用ref获取子组件的属性和方法

在vue3中父组件访问子组件中的属性和方法是需要借助于ref:

1.<script setup> 中定义响应式变量 例如: const demo1 = ref(null)

2.在引入的子组件标签上绑定ref属性的值与定义的响应式变量同名( <demo1 ref="demo1"/>)。

父组件代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<template>

  <demo1 ref="demo1"/>

  <demo2 ref="demo2"/>

  <demo3 ref="demo3"/>

</template>

<script setup>

import Demo1 from '@/components/demo1.vue'

import Demo2 from '@/components/demo2.vue'

import Demo3 from '@/components/demo3.vue'

import {ref,onMounted} from 'vue'

const demo1 = ref(null)

const demo2 = ref(null)

const demo3 = ref(null)

onMounted(()=> {

  console.log(demo1.value.count,'demo1子组件')

  console.log(demo2.value?.a,'demo2子组件')

  console.log(demo3.value.list[0],"demo3子组件")

})

</script>

子组件代码如下:

demo1.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<template>

  <h1>i'm demo1 content{{count}}</h1>

</template>

<script >

import {ref} from 'vue'

export default {

    setup () {

        const count = ref(999)

        return {

            count

        }

    }

}

此时父组件可以获取到子组件的count属性(此时子组件用的是  export default 的写法

demo2

1

2

3

4

5

6

7

8

<template>

  <h1>我是demo2</h1>

</template>

<script setup>

import {defineExpose,ref} from 'vue'

const a = ref('helloss')

</script>

当使用 <script setup> 写法会导致父组件无法访问到子组件中的属性和方法。

使用 <script setup> 的组件,想要让父组件访问到它的属性和方法需要借助与defineExpose来指定需要暴露给父组件的属性。

更改后的demo2组件

1

2

3

4

5

6

7

8

9

10

11

<template>

  <h1>我是demo2</h1>

</template>

<script setup>

import {defineExpose,ref} from 'vue'

const a = ref('helloss')

defineExpose({

    a

})

</script>

demo3

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<template>

  <h1>我是demo3</h1>

</template>

<script>

export default {

  data () {

    return {

        list:['a','b','c']

    }

  },

  methods: {

    btn () {

    }

  }

}

这种方式,父组件可以正常获取到里面的属性和方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cPanel中如何进行网站质量检测

最近我在维护网站的时候需要查看网站质量如何&#xff0c;我使用的是Hostease的主机安装的WordPress网站&#xff0c;随后在咨询了他们的技术支持后获得了方法。 当您在cPanel中部署了网站后&#xff0c;确保网站的质量和性能是至关重要的。cPanel提供了一个便捷的功能Site Qu…

Postman进阶功能-Mock服务与监控

大家好&#xff0c;前面跟大家分享一些关于 Postman 的进阶功能&#xff0c;当我们深入探索 Postman 的进阶功能时&#xff0c;Mock 服务与监控这两个重要方面便跃然眼前。 首先&#xff0c;Mock 服务为我们提供了一种灵活便捷的方式&#xff0c;让我们在某些实际接口尚未准备好…

18.SpringCloud Gateway

简介 SpringCloud Gateway是spingcloud家族的产品&#xff0c;使用netty实现的高性能服务网关&#xff0c;用于替换netflix公司的zuul网关实现。 参考地址&#xff1a; https://spring.io/projects/spring-cloud 术语 工作原理 Route Predicate Factories GatewayFilte…

科大讯飞笔试题---字符串切割

1、 题目描述 小红拿到了一个字符串&#xff0c;她希望你帮她切割成若干子串&#xff0c;满足以下两个条件&#xff1a; 子串长度均为不小于 3 的奇数。 子串内部的字符全部相同。 输入 第一行输入一个正整数n&#xff0c;代表字符串长度。第二行输入一个字符串&#xff0c;仅…

前端基础入门三大核心之HTML篇:解密标签、标题与段落的艺术

前端基础入门三大核心之HTML篇&#xff1a;解密标签、标题与段落的艺术 一、HTML标签&#xff1a;网页元素的建筑砖石1.1 HTML标签的基本概念1.2 基础标签示例自闭合标签示例&#xff1a;图片标签 1.3 实战应用&#xff1a;使用<meta>标签优化网页 二、标题标签&#xff…

运行时间比较

subprocess.run() 函数参数的含义&#xff1a; shell_command&#xff1a;这是要执行的命令。它可以是一个字符串&#xff0c;也可以是一个包含命令和参数的列表。例如&#xff0c;“ls -l” 或 [“ls”, “-l”]。shellTrue&#xff1a;这是一个布尔值参数&#xff0c;指示是…

新一代分布式链路追踪skywalking编码实战教程(下)

&#x1f680; 作者 &#xff1a;“二当家-小D” &#x1f680; 博主简介&#xff1a;⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人&#xff0c;8年开发架构经验&#xff0c;精通java,擅长分布式高并发架构,自动化压力测试&#xff0c;微服务容器化k…

PostgresSQL开启归档模式

文章目录 一、查询数据库归档是否开启1、查看数据目录(找出conf文件位置)2、查看归档是否开启 二、开启归档模式&#xff08;开启后有一定的性能损耗&#xff09;1、创建归档目录2、修改postgresql.conf配置文件3、重启pg 三、验证归档情况1、查看归档是否开启2、检查点 , 刷新…

利用远控工具横向

一.横向移动介绍和方式 1.介绍 内网渗透的横向移动是指攻击者在成功进入内网后&#xff0c;通过利用内部系统的漏洞或者获取的合法访问权限&#xff0c;从一个受感染的系统向其他系统扩散或移动。这种横向移动的目的通常是为了获取更多的敏感信息、提升权限、扩大攻击面或者更…

【蓝桥杯】

题目列表 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using llunsigned long long; #define int ll const int N2e510; int k0; std::string s; int a,b,c,d; void solve() {char op;std::cin>>op;if(opA){std::string s;for(int i1;i&l…

文心一言指令解析

1、介绍 文心一言是一款灵感启发类的产品&#xff0c;它以简洁而深刻的文字表达来激发读者的思考和感悟。该产品通过每天提供一句精选的短语&#xff0c;让用户在繁忙的生活中停下脚步&#xff0c;思考人生和内心的真实需求。 每一句文心一言都经过精心挑选&#xff0c;它们通…

小程序-滚动触底-页面列表数据无限加载

// index/index.vue <template> <!-- 自定义导航栏 --> <CustomNavbar /> <scroll-view scrolltolower"onScrolltolower" scroll-y class"scroll-view"> <!-- 猜你喜欢 --> <Guess ref"guessRef" /> </s…

Hugging Face的TrainingArguments常用参数学习

Hugging Face的TrainingArguments类是用于设置和管理训练模型时的各种参数。下面是一些关键参数及其原理和使用示例&#xff1a; 1. 输出目录 (output_dir) 描述&#xff1a;保存模型和检查点的目录。 示例&#xff1a; output_dir./results2. 训练和验证批次大小 (per_devi…

蓝桥杯高频考点真题单——4.修改数组

修改数组 8.修改数组 - 蓝桥云课 (lanqiao.cn) 本来我的思路很一般&#xff0c;用一个set&#xff0c;记录每一段的最值&#xff0c;然后分情况讨论&#xff0c;如果查询到未记录的&#xff0c;那就直接输出&#xff0c;并记录。如果当前值前面已经有过&#xff0c;那就直接从…

恶劣天气下的车辆探测:多方关注 多模态融合方法

摘要 在自动驾驶汽车技术领域&#xff0c;多模式车辆检测网络(MVDNet)代表了一个重大的飞跃&#xff0c;特别是在具有挑战性的天气条件下。本文主要通过集成多头关注层对MVDNet进行增强&#xff0c;旨在改进其性能。MVDNet模型中集成的多头关注层是一个关键的改进&#xff0c;…

民国漫画杂志《时代漫画》第14期.PDF

时代漫画14.PDF: https://url03.ctfile.com/f/1779803-1247458399-6732ac?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;

java+ vue.js+uniapp一款基于云计算技术的企业级生产管理系统,云MES源码 MES系统如何与ERP系统集成?

java vue.jsuniapp一款基于云计算技术的企业级生产管理系统&#xff0c;云MES源码&#xff0c;MES系统如何与ERP系统集成&#xff1f; MES系统&#xff08;制造执行系统&#xff09;与ERP系统&#xff08;企业资源规划系统&#xff09;的集成可以通过多种方式实现&#xff0c;这…

探索亚马逊云科技技术课程:大模型平台与提示工程的应用与优化

上方图片源自亚马逊云科技【生成式 AI 精英速成计划】技术开发技能课程 前言 学习了亚马逊云科技–技术开发技能课程 本课程分为三个部分&#xff0c;了解如何使用大模型平台、如何训练与部署大模型及生成式AI产品应用与开发&#xff0c;了解各类服务的优势、功能、典型使用案…

苹果MacOS系统使用微软远程桌面连接Windows电脑桌面详细步骤

文章目录 前言1. 测试本地局域网内远程控制1.1 Windows打开远程桌面1.2 局域网远程控制windows 2. 测试Mac公网远程控制windows2.1 在windows电脑上安装cpolar2.2 Mac公网远程windows 3. 配置公网固定TCP地址 前言 日常工作生活中&#xff0c;有时候会涉及到不同设备不同操作系…

Vue3实战笔记(38)—粒子特效终章

文章目录 前言一、怎样使用官方提供的特效二、海葵特效总结 前言 官方还有很多漂亮的特效&#xff0c;但是vue3只有一个demo&#xff0c;例如我前面实现的两个页面就耗费了一些时间&#xff0c;今天记录一下tsparticles官方内置的几个特效的使用方法&#xff0c;一般这几个就足…