【VUE基础】VUE3第五节—核心语法之ref标签、props

ref标签

作用:用于注册模板引用。

  • 用在普通DOM标签上,获取的是DOM节点。

  • 用在组件标签上,获取的是组件实例对象。

用在普通DOM标签上:
在这里插入图片描述

<template><div class="person"><h1 ref="title1">C学安全</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><button @click="showLog">点我打印内容</button></div>
</template><script lang="ts" setup name="Person">import {ref} from 'vue'let title1 = ref()let title2 = ref()let title3 = ref()function showLog(){// 通过id获取元素  在dom标签上需要设置id=title1// const t1 = document.getElementById('title1')// 打印内容// console.log((t1 as HTMLElement).innerText)// console.log((<HTMLElement>t1).innerText)// console.log(t1?.innerText)/************************************/// 通过ref获取元素console.log(title1.value)console.log(title2.value)console.log(title3.value)}
</script>

用在组件标签上:
在父组件中设置ref标签,获取到的是子组件对象,还没有获取到真正数据
例如
在这里插入图片描述

//APP.vue
<template><Person ref="xiaoc123"/><button @click="test">测试</button>
</template><script lang="ts" setup>import Person from './components/Person.vue'import {ref} from 'vue'let xiaoc123  = ref()function test(){console.log(xiaoc123.value);}
</script>
//Person.vue
<template><div class="person"><h1 ref="title1">C学安全</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><!-- <button @click="showLog">点我打印内容</button> --></div>
</template><script lang="ts" setup name="Person">
import { ref } from 'vue'let name = ref('xiaoc')
let age = ref(20)
</script>

以上代码并没有获取到Person.vue中具体的name,age值
需要使用defineExpose将组件中的数据交给外部,就可以获取到name,age值
例如:
在这里插入图片描述

//APP.vue
<template><Person ref="xiaoc123"/><button @click="test">测试</button>
</template><script lang="ts" setup>import Person from './components/Person.vue'import {ref} from 'vue'let xiaoc123  = ref()function test(){console.log(xiaoc123.value);}
</script>
//Person.vue
<template><div class="person"><h1 ref="title1">C学安全</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><!-- <button @click="showLog">点我打印内容</button> --></div>
</template><script lang="ts" setup name="Person">
import { ref,defineExpose } from 'vue'let name = ref('xiaoc')
let age = ref(20)defineExpose({name,age})

Props

在使用

<script setup>
const props = defineProps(['foo'])console.log(props.foo)
</script>

除了使用字符串数组来声明 props 外,还可以使用对象的形式:

// 使用 <script setup>
defineProps({title: String,likes: Number
})

如果你正在搭配 TypeScript 使用

<script setup lang="ts">
defineProps<{title?: stringlikes?: number
}>()</script>

传递不同的值类型

在上述的两个例子中,我们只传入了字符串值,但实际上任何类型的值都可以作为 props 的值被传递。

Number​

<!-- 虽然 `42` 是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :likes="42" /><!-- 根据一个变量的值动态传入 -->
<BlogPost :likes="post.likes" />

Boolean​

<!-- 仅写上 prop 但不传值,会隐式转换为 `true` -->
<BlogPost is-published /><!-- 虽然 `false` 是静态的值,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :is-published="false" /><!-- 根据一个变量的值动态传入 -->
<BlogPost :is-published="post.isPublished" />

Array​

<!-- 虽然这个数组是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :comment-ids="[234, 266, 273]" /><!-- 根据一个变量的值动态传入 -->
<BlogPost :comment-ids="post.commentIds" />

Object​

<!-- 虽然这个对象字面量是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost:author="{name: 'Veronica',company: 'Veridian Dynamics'}"/><!-- 根据一个变量的值动态传入 -->
<BlogPost :author="post.author" />

代码演示:
指定固定数据类型

// 定义一个接口,限制每个Person对象的格式
export interface PersonInter {
id:string,
name:string,age:number
}// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>

App.vue中代码:

<template><Person :list="persons"/>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'import {type Persons} from './types'let persons = reactive<Persons>([{id:'e98219e12',name:'张三',age:18},{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}])
</script>

Person.vue中代码:

<template>
<div class="person">
<ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul>
</div>
</template><script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'// 第一种写法:仅接收
// const props = defineProps(['list'])// 第二种写法:接收+限制类型
// defineProps<{list:Persons}>()// 第三种写法:接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>

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

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

相关文章

RDNet实战:使用RDNet实现图像分类任务(一)

论文提出的模型主要基于对传统DenseNet架构的改进和复兴&#xff0c;通过一系列创新设计&#xff0c;旨在提升模型性能并优化其计算效率&#xff0c;提出了RDNet模型。该模型的主要特点和改进点&#xff1a; 1. 强调并优化连接操作&#xff08;Concatenation&#xff09; 论文…

CF328A IQ Test 题解

思路 依题意模拟即可。 注意要保证是整数。 代码 #include<bits/stdc.h> #include<cstring> #include<queue> #include<set> #include<stack> #include<vector> #include<map> #define ll long long #define lhs printf("\n…

kotlin flow collect collectLatest 区别

在 Kotlin 协程库中&#xff0c;collect 和 collectLatest 都是用于收集 Flow 中发射的数据的方法&#xff0c;但它们在处理数据和响应新数据的方式上有所不同。 collect collect 是一个挂起函数&#xff0c;用于收集 Flow 中发射的所有数据。它会按顺序处理每一个发射的数据…

UML图书管理系统用例图示例

新书速览|《UML 2.5基础、建模与设计实践》新书速览|《UML 2.5基础、建模与设计实践 【例4.4】图书管理系统用例图。 图书管理系统按其业务功能分成借阅者管理、图书管理、借书、还书和用户管理等几部分&#xff0c;这些职能对应于系统的不同组织部门。 1&#xff09;系统参…

echarts 中国地图json文件

阿里云地理网址 DataV.GeoAtlas地理小工具系列 (aliyun.com) 地图cp 修改参考 {"type": "FeatureCollection","features": [{"type": "Feature","properties": { "id": "65", "size&…

Actor-Critic 算法

在强化学习&#xff08;Reinforcement Learning, RL&#xff09;中&#xff0c;Actor-Critic 算法是一类强大的策略梯度方法&#xff0c;结合了策略&#xff08;Policy&#xff09;和价值函数&#xff08;Value Function&#xff09;两种方法的优点。本文将详细介绍 Actor-Crit…

[TypeScript]手撸LFU

[TypeScript]手撸LFU 最近做笔试的时候遇到了要手撸LFU的题目&#xff0c;LFU在vue源码里还是有使用的&#xff0c;例如keep-alive的实现机制就是基于它来搞的。不多说了&#xff0c;直接上代码。 代码 // 双向链表node class DoubleLinkNode {key: number;val: number;freq…

阿一课代表今日分享之使用dnscat2 进行dns隧道反弹shell(直连模式linux对linux)

DNS介绍 DNS是域名系统(Domain Name System)的缩写&#xff0c;是因特网的一项核心服务&#xff0c;它作为可以将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。 DNS的记录类型有很多&a…

归并排序算法Python实现

归并排序原理和步骤 1. 将数组分成两半&#xff0c;直到每个子数组的长度为1 首先&#xff0c;将数组分成两半。如果数组的长度大于1&#xff0c;将其从中间分割为两个子数组。对每个子数组继续进行这个过程&#xff0c;直到每个子数组的长度为1。此时&#xff0c;所有子数组…

L4 Persistence and Streaming

参考自https://www.deeplearning.ai/short-courses/ai-agents-in-langgraph&#xff0c;以下为代码的实现。 这里主要是加入了memory&#xff0c;这样通过self.graph graph.compile(checkpointercheckpointer)就可以加入持久性的检查点通过thread {"configurable"…

项目实战--Spring Boot + GraphQL实现实时数据推送

背景 用户体验不断提升而3对实时数据的需求日益增长&#xff0c;传统的数据获取方式无法满足实时数据的即时性和个性化需求。 GraphQL作为新兴的API查询语言&#xff0c;提供更加灵活、高效的数据获取方案。结合Spring Boot作为后端框架&#xff0c;利用GraphQL实现实时数据推…

Java笔试|面试 —— 对多态性的理解

谈谈对多态性的理解&#xff1a; 一个事物的多种形态&#xff08;编译和运行时状态不一致性&#xff09; 实现机制&#xff1a;通过继承、重写和向上转型&#xff08;Object obj new 子类()&#xff09;来实现。 1.广义上的理解 子类对象的多态性&#xff0c;方法的重写&am…

visual studio 2022 在使用open3d出现的问题及解决方式

当出现以下问题&#xff1a; 使用open3d::utility::LogInfo系列出现LNK2001问题&#xff0c;如下所示&#xff1a;LNK2001 无法解析的外部符号 “char __cdecl fmt::v6::internal::decimal_point_impl(class fmt::v6::internal::locale_ref)” LNK2001 无法解析的外部符号 “p…

【C/C++】SDKDDKVer.h和WinSDKVer.h详解及二者区别

一.SDKDDKVer.h介绍 SDKDDKVer.h 是一个在 Windows 软件开发中常见的头文件&#xff0c;它用于定义软件开发工具包&#xff08;SDK&#xff09;和驱动开发工具包&#xff08;DDK&#xff09;的版本信息。这个文件通常位于 Visual Studio 安装目录下的 Include 子目录中。 …

GD32MCU如何实现掉电数据保存?

大家在GD32 MCU应用时&#xff0c;是否会碰到以下应用需求&#xff1a;希望在MCU掉电时保存一定的数据或标志&#xff0c;用以记录一些关键的数据。 以GD32E103为例&#xff0c;数据的存储介质可以选择内部Flash或者备份数据寄存器。 如下图所示&#xff0c;片内Flash具有10年…

学习数据库的增删改查

一、创建数据库和表 在进行增删改查操作之前&#xff0c;我们需要创建一个数据库和表。 1. 创建数据库 使用 CREATE DATABASE 语句创建数据库&#xff1a; CREATE DATABASE test_db;2. 选择数据库 使用 USE 语句选择数据库&#xff1a; USE test_db;3. 创建表 使用 CREA…

详解C语言结构体

文章目录 1.结构体的声明1.1 结构体的基础知识1.2 结构的声明1.3 结构成员的类型 1.4结构体变量的定义和初始化2.结构体成员的访问3.结构体传参 1.结构体的声明 1.1 结构体的基础知识 结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量 …

【密码学】分组密码概述

一、分组密码的定义 分组密码和流密码都是对称密码体制。 流密码&#xff1a;是将明文视为连续的比特流&#xff0c;对每个比特或字节进行实时加密&#xff0c;而不将其分割成固定的块。流密码适用于加密实时数据流&#xff0c;如网络通信。分组密码&#xff1a;是将明文数据…

【React】Ant Design -- Table分页功能实现

实现步骤 为Table组件指定pagination属性来展示分页效果在分页切换事件中获取到筛选表单中选中的数据使用当前页数据修改params参数依赖引起接口重新调用获取最新数据 const pageChange (page) > {// 拿到当前页参数 修改params 引起接口更新setParams({...params,page})…

翰德恩咨询赋能材料行业上市公司,共筑IPD管理体系新篇章

赋能背景概览 坐落于江苏的某材料行业领军企业&#xff0c;作为国内无机陶瓷膜元件及成套设备领域的佼佼者&#xff0c;以其庞大的生产规模、丰富的产品系列及卓越的研发实力&#xff0c;屹立行业之巅二十余年。公司不仅在新材料研发、技术创新、工艺设计、设备制造及整体解决…