Vue3_基础使用_2

这节主要介绍:标签和组件的ref属性,父子组件间的传递值,ts的接口定义,vue3的生命周期

1.标签的ref属性。

   1.1ref属性就是给标签打标识用的,相当于html的id,但是在vue3中用id可能会乱,下面是ref的使用。
打一个普通标签,并且将对象转为ref的响应式:

//1 ref是标识类似ID,获取标识的值
<span ref='title1'>AAA</span>
<script lang="ts" setup>
   let title1=ref();//变量要与html的ref相同
   console.log(title1.value);
</script>
1.2给组件标记一个ref属性,并且实现    子组件  给   父组件传递数据。

子组件留意  defineExpose({a,b});  //让父组件看那个就交出去哪个,不交父组件就拿不到。

  //子组件
	<script lang="ts" setup>
	   import{ref,defineExpose}from 'vue'
	   let a=ref(100);//声明一个响应式变量
	   let b=ref(200);
	   defineExpose({a,b});//让父组件看那个就交出去哪个
	</script>

父组件接收

   //父组件中
    <person ref='ren'/><!--给子组件标记ref属性-->
	<script lang="ts" setup>
	   import{ref}from 'vue'
	   let ren=ref();//获取子组件
	   console.log(ren.value);//这里面有子组件给的数据
	</script>

2 .ts的接口定义

  a.新建个文件夹types里面建立index.ts文档

   定义了一个对象接口规范,后面定义这个对象都得按这个规范来(名称,类型).

export interface personInterface{
   id:string,
   name:string,
   age:string
}//定义对象接口规范并暴露出去

  定义一个对象数组接口标准

//4定义个自定义类型(就是个数组)
export type interface persons=Array<personInterface>
//personInterface[]也行  //定义数组接口规范

 ts定义这些的好处是在后面的使用中保证不会写错,都要准守的标准。

利用接口定义对象及数组对象:

//引入ts文件  @代表到根目录,如果是index可以不写
import {type personInterface,type persons} from '@/types/index.ts'

//使用对象接口规范 如果你的属性及类型错了它会提示
let person:personInterface ={id:'001',name:'张三',age:20}

//使用自定义数组规范
let personlist:persons=[{id:'001',name:'张三',age:20},,,]

3 利用上面的接口  父组件给子组件传递数据,保证了正确性。

父组件中:

//引入
import {type personInterface,type persons} from '@/type'
//1父组件根据接口 定义对象数组
let personlist:persons=[{id:'001',name:'张三',age:20},{id:'002',name:'张4',age:23}]
//2传递给子组件
<person :list='personlist' />

子组件中: 

//子组件  只接收
import{defineProps}from 'vue'
let v=defineProps(['list']);//v.list;数组内可以是多个
<span>{{list}}</span>//html 可以直接使用

//子组件  接收+限制类型   告诉父组件我只要persons的值
defineProps<list?:persons>()//这个list对应父组件写的参数名称,加?:可以不传

//子组件 接收+限制类型+默认值
//告诉父组件  我要一个persons类型的数组,若不给我就显示默认的值
import{withDefaults}from 'vue'
withDefaults(defineProps<list?:persons>(),{
	list:()=>[{id:'001',name:'张三',age:20}]
})

以上三种接收方式。

4 vue3的生命周期:

vue2生命周期
  创建(创建前beforeCreate   创建完成created)
  挂载(挂载前beforeMount    挂载完成mounted)
  更新(更新前beforeUpdate   更新完成updated)//页面有更新才执行
  销毁(销毁前beforeDestroy  销毁完成destroyed)

vue3生命周期
  创建  <script setup>...这里直接写就是创建</setup>
  挂载 
      import{onBeforeMount,onMounted}from 'vue'
      onBeforeMount(()=>{...挂载代码});      onMounted(()=>{...挂载完毕代码});
  更新
     import{onBeforeUpdate,onUpated}from 'vue'
     onBeforeUpdate(()=>{...更新代码});      onUpated(()=>{...更新完毕代码});
  卸载
     import{onBeforeUnmount,onUnmounted}from 'vue'
     onBeforeUnmount(()=>{...卸载代码});   onUnmounted(()=>{...卸载完毕代码});

vue3将销毁改为了卸载,创建只有一个方法,直接在setup中写即可,以上还不包括路由的钩子。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ncc匹配(一,理论)

前头从来没用过ncc&#xff0c;基于形状匹配搞定后&#xff0c;又翻了翻learning opencv&#xff0c;他并不推荐ncc&#xff0c;而是力推emd&#xff0c;这也是当初我没考虑用ncc的原因。 当初看到ncc公式很复杂&#xff0c;也就忘了。 我的第一个匹配&#xff0c;是最笨的&a…

系统架构19 - 面向对象

面向对象设计 相关概念面向对象分析基本步骤基本原则分析模型 面向对象设计设计模型类的类型 面向对象编程基本特点需求建模设计原则面向对象软件测试 相关概念 接口&#xff1a;描述对操作规范的说明&#xff0c;其只说明操作应该做什么&#xff0c;并没有定义操作如何做。消…

服务器基础知识(IP地址与自动化技术的使用)

目录 ip地址是什么&#xff1f; 如何查看ip地址 Windows的命令提示符 图形化版本&#xff1a; 自动化技术的应用与意义 ip地址是什么&#xff1f; IP地址的主要作用是**为互联网上的每个网络和每台主机分配一个逻辑地址**。 它由32位二进制数字组成&#xff0c;通常分为四…

无人机激光雷达标定板

机载激光雷达标定板是用于校准和验证机载激光雷达系统的设备。由于机载激光雷达系统在测量地形、建筑物和植被等方面具有广泛的应用&#xff0c;因此标定板的使用对于确保测量结果的准确性和可靠性至关重要。 标定板通常由高反射率的材料制成&#xff0c;如镀金的玻璃或陶瓷&am…

关于爬取所有哔哩哔哩、任意图片、所有音乐、的python脚本语言-Edge浏览器插件 全是干货!

这些都是现成的并且实时更新的&#xff01;从次解放双手&#xff01; 首先有自己的edge浏览器基本上都有并且找到插件选项 1.哔哩哔哩视频下载助手&#xff08;爬取哔哩哔哩视频&#xff09; bilibili哔哩哔哩视频下载助手 - Microsoft Edge Addons 下面是效果&#xff1a; 2.图…

谷歌浏览器网站打不开,显示叹号

问题&#xff1a; 您与此网站之间建立的连接不安全请勿在此网站上输入任何敏感信息&#xff08;例如密码或信用卡信息&#xff09;&#xff0c;因为攻击者可能会盗取这些信息。 了解详情 解决方式&#xff1a; 网上有很多原因&#xff0c;亲测为DNS问题&#xff0c;设置&…

iPad“粘贴自”字样不消失解决办法

iPad“粘贴自”字样不消失解决办法 好无语&#xff0c;写论文主要就靠iPad看资料&#xff0c;复制粘帖的时候卡死搞得我无敌焦躁&#xff0c;问了&#x1f34e;支持的客服才解决&#xff0c;方法如下&#xff1a;1.音量上键按一下 2.音量下键按一下 3.一直按开关机键直到出现苹…

pytest的常用插件和Allure测试报告

pytest常用插件 pytest-html插件 安装&#xff1a; pip install pytest-html -U 用途&#xff1a; 生成html的测试报告 用法&#xff1a; ​在.ini配置文件里面添加 addopts --htmlreport.html --self-contained-html 效果&#xff1a; 执行结果中存在html测试报告路…

智能汽车竞赛摄像头处理(3)——动态阈值二值化(大津法)

前言 &#xff08;1&#xff09;在上一节中&#xff0c;我们学习了对图像的固定二值化处理&#xff0c;可以将原始图像处理成二值化的黑白图像&#xff0c;这里面的本质就是将原来的二维数组进行了处理&#xff0c;处理后的二维数组里的元素都是0和255两个值。 &#xff08;2…

RFID手持终端_智能pda手持终端设备定制方案

手持终端是一款多功能、适用范围广泛的安卓产品&#xff0c;具有高性能、大容量存储、高端扫描头和全网通数据连接能力。它能够快速平稳地运行&#xff0c;并提供稳定的连接表现和快速的响应时&#xff0c;适用于医院、物流运输、零售配送、资产盘点等苛刻的环境。通过快速采集…

javaScript的序列化与反序列化

render函数的基本实现 javaScript的序列化与反序列化 一&#xff0c;js中的序列化二&#xff0c;序列化三&#xff0c;反序列化四&#xff0c;总结 一&#xff0c;js中的序列化 js中序列化就是对象转换成json格式的字符串&#xff0c;使用JSON对象的stringify方法&#xff0c;…

18.3K Star,简洁强大下载利器

Hi&#xff0c;骚年&#xff0c;我是大 G&#xff0c;公众号「GitHub指北」会推荐 GitHub 上有趣有用的项目&#xff0c;一分钟 get 一个优秀的开源项目&#xff0c;挖掘开源的价值&#xff0c;欢迎关注。 今天推荐一个强大简洁下载利器&#xff0c;用于从各种网站下载图像/视…

Linux(一)

介绍 常见的操作系统(windows、IOS、Android、MacOS, Linux, Unix)&#xff1b; 一个开源、免费的操作系统&#xff0c;其稳定性、安全性、处理多并发已经得到业界的认可&#xff1b;目前很多企业级的项目(c/c/php/python/java/go)都会部署到 Linux/unix 系统上。 吉祥物 …

leetcode刷题(剑指offer) 297.二叉树的序列化和反序列化

297.二叉树的序列化与反序列化 序列化是将一个数据结构或者对象转换为连续的比特位的操作&#xff0c;进而可以将转换后的数据存储在一个文件或者内存中&#xff0c;同时也可以通过网络传输到另一个计算机环境&#xff0c;采取相反方式重构得到原数据。 请设计一个算法来实现…

使用wda框架实现IOS自动化测试详解

目录 1、weditor元素定位工具 1.1、weditor的安装和使用 2、wda iOS自动化框架 2.1、wda概述 2.2、wda安装 2.3、wda的使用 2.3.1、全局配置 2.3.2、创建客户端 2.3.3、APP相关操作 1、启动APP 2、关闭APP 3、获取APP状态信息 4、获取当前APP的运行信息 2.3.4、设…

ruoyi(若依)(el-menu也可参考)菜单栏过长显示省略号才显示气泡

一、背景 若依前后端分离的版本&#xff0c;新版本中优化了菜单名称过长悬停显示标题&#xff0c;但是是悬浮所有长度大于5的标题。可以查看提交记录&#xff1a;https://gitee.com/y_project/RuoYi-Cloud/commit/99932d91c0144da9f34f5bb05683cc0b86303217 但是我希望是只悬浮…

Vulnhub靶机:hacksudo2 (HackDudo)

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;hacksudo2 (HackDudo)&#xff08;10.0.2.44&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://download.vulnh…

双非本科准备秋招(15.3)—— 力扣二叉树

今天学了二叉树结点表示法&#xff0c;建树代码如下。 public class TreeNode {public int val;public TreeNode left;public TreeNode right;public TreeNode(int val) {this.val val;}public TreeNode(int val, TreeNode left, TreeNode right) {this.val val;this.left …

C++ | 部分和函数partial_sum的使用技巧

如果你需要处理一个数组的前缀和&#xff0c;或者数组中某一段元素的前缀和&#xff0c;你会怎么做呢&#xff1f; partial_sum函数是STL中的函数&#xff0c;用于计算范围的部分和&#xff0c;并从结果开始分配范围中的每个元素&#xff0c;range[first,last)中相应元素的部分…

MH-ET LIVE Boards(ATTiny88)实验一---点亮板载灯

MH-ET LIVE Boards(ATTiny88&#xff09;实验一点亮板载灯 在Arduino IDE中添加开发板资源包加入开发板json添加开发板 安装开发板驱动方法一&#xff1a;github下载2.0a4.rar方法二&#xff1a;开发板的package包中自带的2.0a4.rar安装驱动确认安装成功 blink.ino程序测试![在…