学习vue3 三,组件基础,父子组件传值

组件基础

每一个.vue 文件都可以充当组件来使用

每一个组件都可以复用

父组件引入之后可以直接当标签使用

案例:

App.vue

<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";</script><template><BaseRefAndReactive></BaseRefAndReactive></template><style scoped></style>

组件的生命周期

也就是一个组件从创建到更新最后销毁的过程

在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的,也就是在使用setup语法糖时

常用的生命周期钩子主要有以下六个

onBeforeMount()

在组件DOM实际渲染安装之前调用。在这一步中,dom元素还不存在。

onMounted()

在组件的第一次渲染后调用,该元素现在可用,允许直接DOM访问

onBeforeUpdate()

数据更新时调用,发生在虚拟 DOM 打补丁之前。也就是真实dom尚未更新

onUpdated()

DOM更新后,updated的方法即会调用。

onBeforeUnmount()

在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。

onUnmounted()

卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。

案例:

App.vue

<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref} from "vue";
let flag = ref(true);</script><template><BaseRefAndReactive v-if="flag"></BaseRefAndReactive><button @click="flag = !flag">点我测试</button>
</template><style scoped></style>

组件内

<script setup lang="ts">
import { ref, Ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
const refData = ref("我是组件哈哈哈")
const divText = ref("我是div")
let div:Ref<HTMLDivElement | null> = ref(null)
onBeforeMount(()=>{console.log("onBeforeMount",div.value)
})
onMounted(()=>{console.log("onMounted",div.value)
})
onBeforeUpdate(()=>{console.log("onBeforeUpdate",div.value?.innerHTML)
})
onUpdated(()=>{console.log("onUpdated",div.value?.innerHTML)
})
onBeforeUnmount(()=>{console.log("onBeforeUnmount",div.value)
})
onUnmounted(()=>{console.log("onUnmounted",div.value)
})
function change() {divText.value = "我是div改变后的"
}
</script><template><div>{{refData}}</div><div ref="div">{{divText}}</div><button @click="change">改变</button>
</template><style scoped></style>

 执行图片

父子组件传参

父---> 子

父组件通过v-bind绑定一个数据,然后子组件通过defineProps接受传过来的值,

如果说只传一个字符串的话,不需要使用v-bind

案例

子组件

通过defineProps方法,参数传一个对象,将要接受的数据通过属性的方式写入,如果要进行一些配置也可以使用对象的形式进行配置,如title

<script setup lang="ts">
defineProps({title: {type: String,default: 'Hello World'},list: Array
})
</script><template><div><h1>{{ title }}</h1><ul><li v-for="(item,index) in list" :key="index">{{ item }}</li></ul></div>
</template><style scoped></style>

如果要在setup内使用就需要接受defineProps的返回值,返回值为对象类型属性就是传过来的数据

const data = defineProps({
  title: {
    type: String,
    default: 'Hello World'
  },
  list: Array
})

data.title

使用ts的方式,一泛型的方式去接受数据

defineProps<{title: string,list: number[]
}>()

如果像指定默认值,需要使用withDefaults方法,在第二个参数处以对象属性的形式指定,为了防止引用冲突,数组对象等采用工厂形式返回

withDefaults(defineProps<{title: string,list: number[]
}>(), {title: 'default title',list: () => [1,2,3]
})

父组件内

<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref} from "vue";
const list = ref([1,2,3,4,5])</script><template><BaseRefAndReactive title="这是标题" :list="list"></BaseRefAndReactive>
</template><style scoped></style>
子----> 父

子组件给父组件传参

是通过defineEmits派发一个事件,绑定一个自定义事件,通过一些vue有的事件去触发这个emit从而达到传值的目的

子组件内

<script setup lang="ts">
withDefaults(defineProps<{title: string,list: number[]
}>(), {title: 'default title',list: () => [1,2,3]
})
let emit = defineEmits(["on-click"])
const handleClick = () => {emit("on-click", "我是子组件1",123,"as",{name:"张三"})
}
</script><template><div><h1>{{ title }}</h1><ul><li v-for="(item,index) in list" :key="index">{{ item }}</li></ul><button @click="handleClick">传值</button></div>
</template><style scoped></style>

使用ts的方式,限制参数更加严格

let emit = defineEmits<{(e: "on-click", name: string,age: number): void
}>()
const handleClick = () => {emit("on-click", 'zhangsan', 18)
}

父组件

<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref} from "vue";
const list = ref([1,2,3,4,5])
const handleClick = (name:string,...args) => {console.log(name,"父------>")console.log(args)
}
</script><template><BaseRefAndReactive title="这是标题" :list="list" @on-click="handleClick"></BaseRefAndReactive>
</template><style scoped></style>
子组件暴露给父组件内部属性

通过defineExpose

子组件

<script setup lang="ts">
import { ref,reactive } from 'vue'
const list = reactive([1,2,3,4,5])
const str = ref('hello')
defineExpose({list,str
})
</script><template><div><p>ref:{{str}}</p></div>
</template><style scoped></style>

父组件

<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref,onMounted} from "vue";
let refBase = ref(null);
onMounted(()=>{console.log(refBase.value);
})
</script><template><BaseRefAndReactive ref="refBase"></BaseRefAndReactive>
</template><style scoped></style>

注意需要在onMounted里打印的原因是,setup的生命周期早于子组件挂载,也就是子组件还没有挂载就打印输出所以会是undefined

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

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

相关文章

MySQL——数据表的基本操作(二)查看数据表

使用 SQL 语句创建好数据表后,可以通过查看数据表结构的定义,以确认数据表的定义是否正确。在 MySQL中,查看数据表的方式有两种,具体如下。 1、使用 SHOW CREATE TABLE 查看数据表 在 MySQL 中,SHOW CREATE TABLE语句不仅可以查看创建表时的定义语句还可以查看表的字符编码。S…

PLL基本原理、设计及应用

PLL基本原理 锁相环&#xff08;Phase-Locked Loop, PLL&#xff09;是一种基本的反馈控制系统&#xff0c;广泛应用于电子通信、信号处理、时钟同步等多个领域。PLL通过反馈机制锁定输入信号的频率和相位&#xff0c;从而实现输出信号与输入信号的同步。其基本工作原理可以概…

使用AI绘图工具生成风景图像的教程

随着人工智能技术的飞速发展&#xff0c;AI绘图工具在图像生成和艺术创作方面变得越来越强大&#xff0c;无论你是一个设计师、艺术家&#xff0c;还是仅仅对生成艺术感兴趣的爱好者&#xff0c;AI绘图工具都可以帮助你轻松地创作出惊艳的风景图像。 在这篇教程中&#xff0c;…

顶顶通手机助手拦截方案

现在很多品牌的手机&#xff0c;都自带语音助手&#xff0c;比如我用的是小米手机&#xff0c;就自带小爱助手&#xff0c;可以自动接听各种广告营销电话。如果来电号码被标记为广告营销&#xff0c;小爱助手就会自动应答&#xff0c;然后模拟真人进行对话。 现在自动外呼系统拨…

RPC通信的简单流程

远程调用者假设需要调用Login方法&#xff0c;将调用的信息通过muduo库&#xff0c;同时进行了序列化和反序列化&#xff0c;发送到Rpcprovider上&#xff0c;RpcProvider通过对象和方法表来确定需要调用哪个服务对象的哪个方法。 UserRpcServiceRpc和UseRpcServiceRpcStub是继…

【practise】电话号码的字母组合

关于我&#xff1a; 睡觉待开机&#xff1a;个人主页 个人专栏: 《优选算法》《C语言》《CPP》 生活的理想&#xff0c;就是为了理想的生活! 作者留言 PDF版免费提供&#xff1a;倘若有需要&#xff0c;想拿我写的博客进行学习和交流&#xff0c;可以私信我将免费提供PDF版。…

立即升级你的前端技能!跟随这份Vue3项目搭建教程,从零基础到专业,一步步掌握最新Web开发技术,打造响应快速、界面优雅的现代网站。

全能开发套餐&#xff0c;轻松打造现代网站&#xff01;Vue3携手Vite带来开发新体验&#xff0c;结合Axios、Pinia、Element Plus实现功能与美观并重&#xff0c;TailwindCSS与DaisyUI提供设计灵活性&#xff0c;Router 4处理页面导航。从前端到后端&#xff0c;一站式解决&…

一、Matlab基础

文章目录 一、Matlab界面二、Matlab窗口常用命令三、Matlab的数据类型3.1 数值类型3.2 字符和字符串3.3 逻辑类型3.4 函数句柄3.5 结构类型3.6 细胞数组 四、Matlab的运算符4.1 算术运算符4.2 关系运算符4.3 逻辑运算4.4 运算符优先级 五、Matlab的矩阵5.1 矩阵的建立5.2 矩阵的…

【Linux】输入输出重定向

目录 一、概念 二、重定向的本质 三、系统调用接口dup和dup2 3.1 dup 3.2 dup2 一、概念 在之前对Linux的学习中&#xff0c;我们有接触过一系列的重定向命令&#xff0c;例如 >、>>等 它们可以将一个命令的输出或输入重定向到其他地方&#xff0c;如echo命令…

开源应用:AI监测如何成为社会安全的智能盾牌

社会背景 随着社会的快速发展&#xff0c;社会安全管理正站在一个新时代的门槛上。社会对安全管理的需求不断增长&#xff0c;传统的安全措施已难以满足现代社会的需求。AI技术以其独特的数据处理和模式识别能力&#xff0c;正在成为我们社会安全的智能盾牌。 AI大模型识别功能…

3.js - 物理引擎终极

import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls import gsap from gsap // 导入动画库 import * as dat from dat.gui // 导入dat.gui// 导入 cannon-es 引擎 import * as CANNON from cannon-es// -----------------…

探索GPT-4o mini:开启AI驱动的开发新时代

文章目录 GPT-4o mini&#xff1a;小身材&#xff0c;大能量成本与效能的完美平衡 AI辅助开发&#xff1a;从构想到现实自动化文档编写智能代码审查 提升创新能力&#xff1a;AI驱动的新常态模型驱动的设计思维 社区共享与合作知识共享的重要性 未来展望&#xff1a;AI与人类的…

<数据集>agv仓储机器人识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1514张 标注数量(xml文件个数)&#xff1a;1514 标注数量(txt文件个数)&#xff1a;1514 标注类别数&#xff1a;3 标注类别名称&#xff1a;[G1PB2000_Paleteira_AGVS BYD, G1RB5000, AGV-P] 序号类别名称图片数…

6自由度机械手DH坐标系建立

一、建立机械臂DH坐标系 Z为转动关节的转轴&#xff0c;Xi垂直于关节轴i和i1所在的平面&#xff0c;则根据上述方法可以建立坐标系如下图&#xff1a; 二、DH参数表 DH参数设定&#xff1a;机器人的每个连杆可以用4个运动学参数表示&#xff0c;DH法建立坐标系&#xff0c;xi-…

[开端]如何看待“低代码”开发平台的兴起

如何看待“低代码”开发平台的兴起&#xff1f; 近年来&#xff0c;“低代码”开发平台如雨后春笋般涌现&#xff0c;承诺让非专业人士也能快速构建应用程序。这种新兴技术正在挑战传统软件开发模式&#xff0c;引发了IT行业的广泛讨论。低代码平台是提高效率的利器&#xff0…

[开端]JAVA抽象类使用到redis观察着

一、绪论 当redis内容发生变化时需要通知一些观察者做一些动作怎么做&#xff1f; 二、JAVA抽象类 public abstract class AbstractRedisChangeListener {public abstract void change(String key, String value, String crudType); }使用abstract进行修饰一个类 其中抽象类…

SpringBoot中如何自定义自己的过滤器Filter(简易版)

本文不再说SpringMVC中的写法&#xff0c;毕竟现在项目都是SpringBoot&#xff0c;我们还是尽量使用SpringBoot的写法&#xff0c;首先了解一下Filter。 说白了&#xff0c;就是在请求到达服务器之前进行拦截&#xff0c;一般使用场景是拦截登录进行权限校验&#xff0c;当然一…

安装python+python的基础语法

安装python python2为内置&#xff0c;安装python3----3.6.8 最新安装3.12使用源码安装 1.查看yum源&#xff0c;epel [rootpython01 ~]# yum list installed |grep epel 2.安装python3 [rootpython01 ~]# yum -y install python3 3.查看版本 [rootpython01 ~]# python…

Android Studio Gradle多渠道打包

原理使用Android Studio打一次渠道包&#xff0c;用反编译工具反编译后&#xff0c;修改渠道信息重新编译 准备文件 分渠道配置文件&#xff1a;channel.txt ↓ # 多渠道配置里“统计平台”、“市场名称”、“渠道编号”分别代表什么意思&#xff1f; # 统计平台&#xff1a;…

AT32F421驱动BLDC 配合上位机控制与调参

AT32F421驱动BLDC 配合上位机控制与调参 &#x1f527;AT32 电机控制与调参上位机软件&#xff1a;ArteryMotorMonitor&#xff1a;https://www.arterytek.com/cn/support/motor_control.jsp?index0&#x1f33f;测试电机参数&#xff1a;2204-12N14P&#xff0c;无感BLDC&…