Vue3.0中父组件与子组件的通信传值props与emit :VCA模式

简介

什么是props

Props 是 Vue 组件之间通信的一种方式,通过 Props,父组件可以向子组件传递数据,即:父组件可以通过组件标签上的属性值把数据传递到子组件中。子组件可以根据自己的属性和方法去渲染展示数据或执行某些操作。由于 props 是单向数据流的,它是只能从父组件传递到子组件的,而子组件是无法更改 props 的值的,只能由父组件来修改。这样就保证了组件的数据传递不会出现混乱和错乱的情况。

如何定义props

在 Vue 组件中,需要通过配置 props 属性来定义组件的 props。在组件中添加 props 属性之后,就可以使用 props 选项接收从父组件传递的数据。

使用字符串数组方式定义props

Props可以是数组形式进行滴定仪,在这里Props定义了一个数组,其中每个元素都是一个字符串类型的Prop名,表示父组件可以向子组件传递的数据项
 

案列

Child.vue子组件

<template><div><button>返回</button>{{ computedTitle }}<button @click="handelClick">首页</button></div>
</template>
<script>
import { computed } from 'vue';export default {//注意:用来接收的props是必不可少的。// props:这个还是和 Vue2 使用的组件之间通信的 props一样。props: ["mytitle", "aa"],//vca中的setup钩子函数接收两个参数:props和context//setup(props):所接收到的参数其实是来自上面props数组中的对象,而不是直接从父组件中传递过来的// context:定义上下文,这个参数身上有一些我们比较常用的属性,比如// context.emit:等同于 Vue2 的 this.$emit。// context.slots:等同于 Vue2 的 this.$slots。// context.attrs:等同于 Vue2 的 this.$attrs。// context.expose():当前组件对外暴露属性的函数//参数直接可以写成解构的形式:setup({mytitle,aa},{emit,slots,attrs,expose}){   ......    }setup(sProps, sContext) {console.log(sProps);const computedTitle = computed(() => {return `这是在子组件中重新包装后的标题:${sProps.mytitle}`})const email = "abc@qq.com"const handelClick = () => {sContext.emit("myevent", "李四", email) //VCA中的emit用法:调用父组件的myevent监听事件,执行监听事件中绑定的函数}return {computedTitle,handelClick,}}
}
</script>

app.vue父组件

<template><div><Child :mytitle="mytitle" aa="返回" @myevent="myHandelClick"></Child><div>{{ name }}---{{ email }}</div></div>
</template>
<script>
import { ref } from 'vue';
import 'bootstrap/dist/css/bootstrap.css'
import Child from "./components/Child.vue" //导入Child组件模板
export default {components: {Child: Child //注册Child子组件},setup() {const mytitle = ref("我是标题");const name = ref("");const email = ref("");//email.value=1; ////myevent监听事件的绑定函数const myHandelClick = (myname, myemail) => {name.value = myname;  //name经过ref包装后是一个对象,name.value = false;是改变对象的属性的值。name变量本身的值没有改变,还是这个对象。email.value = myemail //email经过ref包装后是一个对象,email.value = false;是改变对象的属性的值。email变量本身的值没有改变,还是这个对象。}return {mytitle,name,email,myHandelClick}}
}
</script>

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

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

相关文章

Pinia 是什么?Redux、Vuex、Pinia 的区别?

结论先行&#xff1a; Pinia 是 Vue 官方团队开发的一个全新状态管理库。与 Redux、Vuex 相同&#xff0c;核心都是解决组件间的通信和数据的共享问题。 Pinia 和 Vuex 类似&#xff0c;但使用起来更加简单和直观。因为 Pinia 基于 Vue3 的 Composition 组合式 API 风格&…

金豺算法优化VMD参数,六种适应度函数任意切换,最小包络熵、样本熵、信息熵、排列熵、排列熵/互信息熵、包络谱峰值因子...

声明&#xff1a;对于作者的原创代码&#xff0c;禁止转售倒卖&#xff0c;违者必究&#xff01; 本期采用金豺优化算法(Golden Jackal optimization, GJO)优化VMD参数。选取六种适应度函数进行优化&#xff0c;以此确定VMD的最佳k和α参数。6种适应度函数分别是&#xff1a;最…

大厂真题:【模拟】阿里蚂蚁2023秋招-奇偶操作

题目描述与示例 题目描述 小红有一个长度为n的数组a&#xff0c;她将对数组进行m次操作&#xff0c;每次操作有两种类型&#xff1a; 将数组中所有值为奇数的元素加上x将数组中所有值为偶数的元素加上x 请你输出m次操作后的数组 输入描述 第一行两个整数n和m&#xff0c;表示…

初识JVM

1. JVM内存区域划分 jvm在启动的时候&#xff0c;会申请到一整个很大的内存区域。整个一大块区域&#xff0c;不太好用。为了更方便使用&#xff0c;把整个区域隔成了很多区域&#xff0c;每个区域都有不同的作用。 本地方法栈 此处提到的栈和数据结构中的栈不是一个东西&…

如何在Linux机器上使用ssh远程连接Windows Server服务器

如何在Linux机器上使用ssh远程连接Windows Server服务器 一、源起二、使用ssh远程连接Windows1.先决条件&#xff08;1&#xff09;至少运行 Windows Server 2019 或 Windows 10&#xff08;内部版本 1809&#xff09;的设备。&#xff08;2&#xff09;PowerShell 5.1 或更高版…

【广州华锐互动】影视制作VR在线学习:身临其境,提高学习效率

随着科技的不断发展&#xff0c;影视后期制作技术也在日新月异。然而&#xff0c;传统的教学方式往往难以满足学员的学习需求&#xff0c;无法充分展现影视后期制作的魅力和潜力。近年来&#xff0c;虚拟现实(VR)技术的崛起为教学领域带来了新的机遇。通过VR教学课件&#xff0…

超详细Linux搭建Hadoop集群

一、给计算机集群起别名——互通 总纲&#xff1a; 1、准备3台客户机&#xff08;关闭防火墙、静态IP、主机名称都设置好&#xff09; 2、安装JDK&#xff08;可点击&#xff09; 3、配置环境变量 4、安装Hadoop 5、配置hadoop的环境变量 6、配置集群 7、群起测试 1.1、环境准备…

蓝鹏测控平台软件 智能制造生产线的大脑

测控软件平台&#xff0c;是由包括底层驱动程序、通讯协议等&#xff0c;集数据采集、自动反馈控制、信息分析以及多种工程应用于一体的一种电子信息处理平台。 蓝鹏测控软件平台目前支持各种文本标签 、数字标签&#xff1b;支持趋势图、波动图、缺陷图及统计图表。多端口实现…

MCU常见通信总线串讲(一)—— UART和USART

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言一…

使用 curator 连接 zookeeper 集群 Invalid config event received

dubbo整合zookeeper 如图&#xff0c;错误日志 2023-11-04 21:16:18.699 ERROR 7459 [main-EventThread] org.apache.curator.framework.imps.EnsembleTracker Caller0 at org.apache.curator.framework.imps.EnsembleTracker.processConfigData(EnsembleTracker.java…

Lyapunov function 李雅普诺夫函数

文章目录 正文定义对定义中出现的术语的进一步讨论 Basic Lyapunov theorems for autonomous systems 自治系统的基本李雅普诺夫定理Locally asymptotically stable equilibrium 局部渐近稳定平衡Stable equilibrium 稳定平衡Globally asymptotically stable equilibrium 全局渐…

计算机毕业设计java+vue+springboot的论坛信息网站

项目介绍 本论文系统地描绘了整个网上论坛管理系统的设计与实现&#xff0c;主要实现的功能有以下几点&#xff1a;管理员&#xff1b;首页、个人中心、用户管理、公告管理、公告类型管理、热门帖子管理、帖子分类管理、留言板管理、论坛新天地、我的收藏管理、系统管理&#…

react typescript @别名的使用

1、config/webpack.config.js中找到alias&#xff0c;添加"": path.resolve(__dirname,../src)&#xff0c;如下&#xff1a; alias: {// Support React Native Web// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-w…

用Java(C语言也可以看)实现冒泡排序和折半查找(详细过程图)+逆序数组

目录 一、冒泡排序 1.冒泡排序介绍 2.排序的思路 3.完整代码 二、折半查找 1.折半查找介绍 2.查找的思路 3.完整代码 三、逆序数组 1.逆序思路 2..完整代码 一、冒泡排序 冒泡排序是众多排序的一种&#xff0c;无论在C语言或者Java中都很常见&#xff0c;后续在数据…

JAVA前端开发介绍

以一个网站为例包括网站设计、前端开发、程序开发等。网站设计就是网站的外观&#xff0c;平面的东西。程序开发也好理解就是功能实现。而前端开发&#xff0c;简单来说&#xff0c;就是把平面效果图转换成网页&#xff0c;把静态转换成动态。它的工作包括了:切图、写样式、做鼠…

DSP_TMS320F28335_队列与栈

说起队列和栈&#xff0c;链表动态内存分配的方式&#xff0c;是比较常见的方式&#xff0c;最近项目下需要在dsp上面使用队列和栈两种数据结构&#xff0c;所有就使用链表动态内存分配的方式实现了一下&#xff0c;但是调试的过程中发现运行的时候总是在动态内存分配的位置出b…

IDEA取消git对项目的版本控制

前言 前几天新建项目的时候不小心选了个git仓库&#xff0c;导致这个测试项目一直被git管理着。 解决办法 1 右键项目 选择打开资源目录 2 删除.git文件 把目录下的.git文件删掉 3 删除idea中的git管理 删除完.git文件后&#xff0c;进入idea&#xff0c;右下角会有这样的提…

广域网加速的作用:企业为什么需要广域网加速?

由于局域网与广域网之间巨大的带宽鸿沟&#xff0c;通过增加带宽来满足膨胀的流量需求是不切实际的。 并且广域网带宽成本较高&#xff0c;增加广域网带宽对任何企业都意味着巨大的成本负担。这些使得控制 管理广域网带宽使用成为必需。 企业为什么要加速广域网? 对重要的企…

轻量封装WebGPU渲染系统示例<12>- 基础3D对象实体(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/PrimitiveEntityTest.ts 此示例渲染系统实现的特性: 1. 用户态与系统态隔离。 细节请见&#xff1a;引擎系统设计思路 - 用户态与系统态隔离-CSDN博客 2. 高频调用与低频调用隔…

vue3-video-play视频播放组件

安装&#xff1a; npm i vue3-video-play --save使用说明&#xff1a; https://codelife.cc/vue3-video-play/guide/install.html