Vue3中使用props和emits详解

2023-12-24 01:04

本文主要是介绍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让子组件调用父组件中的方法来修改父组件中的值,同时子组件中的值也会发生响应式变化;

这篇关于Vue3中使用props和emits详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/530068

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处