Vue3中使用props和emits详解

前言

在Vue3中,父子组件之间的数据传递是一个常见的需求。本文将介绍如何在Vue3中传递对象,并且在子组件中访问和修改父组件对象中的属性值,以及子组件如何调用父组件中的方法。


在 Vue 3 中,父子组件之间传值有以下作用:

1. 组件通信:父组件可以通过向子组件传递数据来实现与子组件的通信。这样,父组件就能将数据传递给子组件,并且子组件可以根据接收到的数据进行渲染或执行相应的操作。

2. 数据共享:通过父子组件传值,可以在多个组件之间共享数据。当多个子组件需要访问同一个数据时,可以将数据定义在父组件中,然后通过 props 将数据传递给子组件,从而实现数据共享。

3. 动态配置:父组件可以通过向子组件传递不同的参数或配置,来动态控制子组件的行为。例如,父组件可以根据用户的操作或业务需求,向子组件传递不同的 props 值,以便子组件根据不同的配置进行展示或处理。

4. 构建组件库:通过父子组件传值,可以构建可复用的组件库。父组件可以定义一些可配置的选项或属性,并将它们作为 props 传递给子组件。这样,其他开发者在使用该组件库时,可以根据自己的需求和场景,通过修改 props 值来自定义组件的行为和外观。
 

1. 在setup()语法糖中使用 props 和 emits

setup有props和cxt两个参数,可以在setup语法糖内部使用props 和 emits

父组件代码示例:

<script setup lang="ts">
import {ref} from 'vue'const count = ref(10)
const userlist = ref([{"name":"xujingliang","password":"123456"},{"name":"xujingliang","password":"123456"},{"name":"xujingliang","password":"123456"}
])function edit(val):void{userlist.value[val].name = 'liudehua'
}function del():void{alert("delete")
}
</script><template><definePropsTest :userlist="userlist" :count="count" @edit="edit" @delete="del"></definePropsTest>
</template><style scoped></style>

子组件代码示例: 

<script lang="ts">
import {setup,emit} from 'vue';export default{props:{count:Number,userlist:Array},emits:["edit","delete"],setup(props,cxt){// 语法糖内部使用function edit(index):void{cxt.emit("edit",index)}function del():void{cxt.emit("delete");}return {props,edit,del}},created(){console.log(this.count);console.log(this.userlist)this.$emit("edit",1);}}
</script>
<template>
<!-- 在模版中访问 -->
<p>总共{{ count }}条数据</p><table :border="1"><tr><th>姓名</th><th>密码</th><th>操作</th></tr><tr v-for="(item,index) in userlist" :key="index"><td>{{ item.name }}</td><td>{{ item.password }}</td><td><button @click="edit(index)">编辑</button><button @click="del()">删除</button></td></tr></table></template>

2. <script setup>语法中使用 props和emits

defineProps返回的props对象,是一个proxy对象,所有特性和reactive基本相同,只不过由defineProps定义出的props对象的值是只读的,还有在模板上可以单独属性直接使用

defineProps:父组件传值给子组件,实现子组件访问父组件传入的值

语法:

let props = defineProps({count:Number,       // 也可以直接简写 只填类型userlist:{type:Array,    // 规定数据的类型required:true, // 是否是必填选项default:[]     // 如果父组件没有传值情况下的默认值}
})

父组件

<script setup lang="ts">
import {ref} from 'vue'import definePropsTest from './components/definePropsTest.vue'const count = ref(10)
const userlist = ref([{"name":"xujingliang","password":"123456"},{"name":"xujingliang","password":"123456"},{"name":"xujingliang","password":"123456"}
])</script><template><definePropsTest :userlist="userlist" :count="count"></definePropsTest>
</template><style scoped></style>

子组件

<script setup lang="ts">let props = defineProps({count:Number,       // 也可以直接简写 只填类型userlist:{type:Array,    // 规定数据的类型required:true, // 是否是必填选项default:[]     // 如果父组件没有传值情况下的默认值}})// 在代码中访问console.log(props.count);console.log(props.userlist);</script>
<template>
<!-- 在模版中访问 --><p>总共{{ props.count }}条数据</p><table :border="1"><tr><th>姓名</th><th>密码</th></tr><tr v-for="(item,index) in props.userlist" :key="index"><td>{{ item.name }}</td><td>{{ item.password }}</td></tr></table>
</template>

子组件如何修改父组件传入的值?

vue是单项数据流,引用Vue的官网的话:父系 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父及组件的状态,从而导致你的应用的数据流向难以理解。

在父子组件通讯的时候,子组件都禁止直接修改父级传过来的prop 直接修改在控制台会报错。但VUE的两个语法糖能做到这一点,
 

这里我们来讲defineEmits的使用,子组件调用父组件中的方法

 父组件代码示例:

<script setup lang="ts">
import {ref} from 'vue'const count = ref(10)
const userlist = ref([{"name":"xujingliang","password":"123456"},{"name":"xujingliang","password":"123456"},{"name":"xujingliang","password":"123456"}
])function edit(val):void{userlist.value[val].name = 'liudehua'
}function del():void{alert("delete")
}
</script><template><definePropsTest :userlist="userlist" :count="count" @edit="edit" @delete="del"></definePropsTest>
</template><style scoped></style>

子组件代码示例:

<script setup lang="ts">
let props = defineProps({count:Number,       // 也可以直接简写 只填类型userlist:{type:Array,    // 规定数据的类型required:true, // 是否是必填选项default:[]     // 如果父组件没有传值情况下的默认值}
})const emit = defineEmits(['edit', 'delete']);// 在代码中访问console.log(props.count);console.log(props.userlist);</script>
<template>
<!-- 在模版中访问 --><p>总共{{ props.count }}条数据</p><table :border="1"><tr><th>姓名</th><th>密码</th><th>操作</th></tr><tr v-for="(item,index) in props.userlist" :key="index"><td>{{ item.name }}</td><td>{{ item.password }}</td><td><button @click="emit('edit',index)">编辑</button><button @click="emit('delete',item.name)">删除</button></td></tr></table>
</template>

在Vue3中如果想修改父组件传入的值,只能通过defineEmits让子组件调用父组件中的方法来修改父组件中的值,同时子组件中的值也会发生响应式变化;

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

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

相关文章

微信小程序开发学习(上强度):从0开始写项目

前置知识 1、配置插件 微信小程序 基础模板引入sass的两种方法_微信小程序使用sass-CSDN博客 之后在对应页面里新建一个scss文件&#xff0c;写css 2、注册小程序&#xff0c;有个自己的appid&#xff0c;不用测试号了 5.1.注册小程序账号获取appid及个人和企业版差异_哔哩…

Flutter 三: Dart

1 数据类型 数字(number) int double 字符串转换成 num int.parse(“1”) double.parse(“1”);double 四舍五入保留两位小数 toStringAsFixed(2) 返回值为stringdouble 直接舍弃小数点后几位的数据 可使用字符串截取的方式 字符串(string) 单引号 双引号 三引号三引号 可以输…

positivessl多域名ev证书

PositiveSSL是Sectigo的子品牌&#xff0c;拥有类型丰富的SSL数字证书&#xff0c;旗下的SSL证书产品为众多企业和个人开发者营造了安全的网络环境&#xff0c;对网站信息进行加密服务&#xff0c;支持兼容所有现代浏览器和移动设备。今天就随SSL盾小编了解PositiveSSL旗下的多…

C++面向对象(OOP)编程-STL详解(vector)

本文主要介绍STL六大组件&#xff0c;并主要介绍一些容器的使用。 目录 1 泛型编程 2 CSTL 3 STL 六大组件 4 容器 4.1 顺序性容器 4.1.1 顺序性容器的使用场景 4.2 关联式容器 4.2.1 关联式容器的使用场景 4.3 容器适配器 4.3.1 容器适配器的使用场景 5 具体容器的…

生物信息学R分析工具包ggkegg的详细使用方法

ggkegg介绍 ggkegg 是一个用于生物信息学研究的工具&#xff0c;可以用于分析和解释基因组学数据&#xff0c;并将其与已知的KEGG数据库进行比较。ggkegg 是从 KEGG 获取信息并使用 ggplot2 和 ggraph 进行解析、分析和可视化的工具包&#xff0c;结合其他使用 KEGG 进行生物功…

数据流图_DFD图_精简易上手

数据流图(DFD)是一种图形化技术,它描绘信息流和数据从输人移动到输出的过程中所经受的变换。 首先给出一个数据流图样例 基本的四种图形 直角矩形:代表源点或终点,一般来说,是人,如例图的仓库管理员和采购员圆形(也可以画成圆角矩形):是处理,一般来说,是动作,是动词名词的形式…

PromptNER: Prompt Locating and Typing for Named Entity Recognition

原文链接&#xff1a; https://aclanthology.org/2023.acl-long.698.pdf ACL 2023 介绍 问题 目前将prompt方法应用在ner中主要有两种方法&#xff1a;对枚举的span类型进行预测&#xff0c;或者通过构建特殊的prompt来对实体进行定位。但作者认为这些方法存在以下问题&#xf…

mySQL数据库用户管理

目录 1.创建外键约束 外键的定义 主键表和外键表的理解 具体操作 2.数据库用户管理 新建用户 查看用户信息 重命名用户 删除用户 修改当前和其他用户登录密码 忘记 root密码的解决办法 3.数据库用户授权 授予权限 查看权限 撤销权限 1.创建外键约束 外键的定义…

【视觉实践】使用Mediapipe进行目标检测:杯子检测和椅子检测实践

目录 1 Mediapipe 2 Solutions 3 安装mediapipe 4 实践 1 Mediapipe Mediapipe是google的一个开源项目,可以提供开源的、跨平台的常用机器学习(machine learning,ML)方案。MediaPipe是一个用于构建机器学习管道</

计算机毕业设计 基于SpringBoot的房屋租赁管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

JS中页面跳转的几种方法

我们在html中学的页面跳转最常用的就是a标签了把&#xff01; a标签跳转 直接跳转页面&#xff1a;比较适用于页面中固定的地址 <a href"页面路径">跳转</a> js中window对象location进行跳转 是指覆盖当前页面进行跳转 window。loaction。href&quo…

.Net 访问电子邮箱-LumiSoft.Net,好用

序言&#xff1a; 网上找了很多关于.Net如何访问电子邮箱的方法&#xff0c;但是大多数都达不到想要的需求&#xff0c;只有一些 收发邮件。因此 花了很大功夫去看 LumiSoft.Net.dll 的源码&#xff0c;总算做出自己想要的结果了&#xff0c;果然学习诗人进步。 介绍&#xff…

华为OD机试 - 灰度图存储(Java JS Python C)

题目描述 黑白图像常采用灰度图的方式存储,即图像的每个像素填充一个灰色阶段值,256阶灰图是一个灰阶值取值范围为 0~255 的灰阶矩阵,0表示全黑,255表示全白,范围内的其他值表示不同的灰度。 但在计算机中实际存储时,会使用压缩算法,其中一个种压缩格式描述如如下: 1…

ceph集群搭建详细教程(ceph-deploy)

ceph-deploy比较适合生产环境&#xff0c;不是用cephadm搭建。相对麻烦一些&#xff0c;但是并不难&#xff0c;细节把握好就行&#xff0c;只是命令多一些而已。 实验环境 服务器主机public网段IP&#xff08;对外服务&#xff09;cluster网段IP&#xff08;集群通信&#x…

C语言中的关键字

Static 静态局部变量 结果&#xff1a; a作为静态局部变量&#xff0c;第一次进入该函数的时候&#xff0c;进行第一次变量的初始化&#xff0c;在程序整个运行期间都不释放。&#xff08;因为下一次调用还继续使用上次调用结束的数值&#xff09; 但是其作用域为局部作用域&…

大语言模型的三种主要架构 Decoder-Only、Encoder-Only、Encoder-Decoder

现代大型语言模型&#xff08;LLM&#xff09;的演变进化树&#xff0c;如下图&#xff1a; https://arxiv.org/pdf/2304.13712.pdf 基于 Transformer 模型以非灰色显示&#xff1a; decoder-only 模型在蓝色分支&#xff0c; encoder-only 模型在粉色分支&#xff0c; encod…

数据权限篇

文章目录 1. 如何实现数据权限&#xff08;内核&#xff09;1.1 原理1.2 源码实现&#xff0c;mybatis如何重写sql1.2.1 重写sql1.2.2 解析sql1.2.3 DataPermissionDatabaseInterceptor 1. 如何实现数据权限&#xff08;内核&#xff09; 1.1 原理 面对复杂多变的需求&#xf…

LeetCode-23 合并 K 个升序链表

LeetCode-23 合并 K 个升序链表 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例 1&#xff1a; 输入&#xff1a;lists [[1,4,5],[1,3,4],[2,6]] 输出&#xff1a;[1,1,2,3,4,4,5,6] 解…

Spring事务回滚规则,是否只读,超时时间,事务失效

一:回滚规则 默认情况下&#xff0c;事务只有遇到运行期异常(RuntimeExcertion的子类)以及 Error 时才会回滚&#xff0c;在遇到检查型(Checked Exception)异常时不会回滚。像 1/0&#xff0c;空指针这些是RuntimeException&#xff0c;而IOException 则算是 Checked Exception…

JAVA面试——创建线程有几种方法?

1.继承Thread类&#xff1a;创建一个类&#xff0c;继承自 Thread 类&#xff0c;并重写 run() 方法来定义线程的执行逻辑。然后可以实例化这个类并调用 start() 方法来启动线程。 public class MyThread extends Thread {Overridepublic void run() {// 线程执行逻辑for (int…