【前端面试3+1】18 vue2和vue3父传子通信的差别、props传递的数据在子组件是否可以修改、如何往window上添加自定义属性、【多数元素】

一、vue2和vue3父传子通信的差别

1、Vue2

父组件向子组件传递数据通常通过props属性来实现。父组件可以在子组件的标签中使用v-bind指令将数据传递给子组件的props属性。在子组件中,可以通过props属性来接收这些数据。这种方式是一种单向数据流的方式,父组件传递数据给子组件,子组件接收并渲染这些数据。

vue2中使用props属性传递数据示例:

<!-- ParentComponent.vue -->
<template><ChildComponent :message="parentMessage" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {parentMessage: 'Hello from parent'};},components: {ChildComponent}
};
</script>
<!-- ChildComponent.vue -->
<template><div>{{ message }}</div>
</template><script>
export default {props: ['message']
};
</script>

2、Vue3

        Vue3除了仍然可以使用props来进行父子组件通信外,Vue 3引入了一个新的API,即attrsemit。通过attrs,父组件可以向子组件传递属性,而子组件可以通过emit向父组件发送事件。这种方式使得父子组件之间的通信更加灵活,子组件可以通过emit触发事件,父组件可以监听这些事件并做出相应的响应。

        还引入了v-model指令的改进,使得父组件可以通过v-model指令双向绑定数据到子组件。这样父组件可以直接修改子组件中的数据,而不需要通过事件和属性来进行通信。

在Vue 3中,可以使用attrs属性传递数据的示例代码如下:

<!-- ParentComponent.vue -->
<template><ChildComponent v-bind="attrs" @child-event="handleChildEvent" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {attrs: {message: 'Hello from parent'}};},components: {ChildComponent},methods: {handleChildEvent(data) {console.log('Received data from child:', data);}}
};
</script>
<!-- ChildComponent.vue -->
<template><button @click="emitEvent">Click me</button>
</template><script>
export default {methods: {emitEvent() {this.$emit('child-event', 'Data from child');}}
};
</script>

父组件通过attrs属性向子组件传递message属性,子组件通过$emit方法触发child-event事件,并将数据传递给父组件。父组件可以监听child-event事件并处理子组件传递的数据

二、props传递的数据在子组件是否可以修改?

不能! 

在Vue中,props 是单向数据流的,意味着父组件传递给子组件的 props 数据在子组件中是只读的,子组件不能直接修改 props 数据。

!!!然而,如果子组件需要修改传递下来的数据,可以通过以下方式实现

        子组件就间接地修改父组件传递下来的数据

        1、在子组件内部使用 data 属性:子组件可以将 props 数据作为初始值,然后在子组件内部将其赋值给 data 属性中的变量,从而可以在子组件内部修改这些数据。

<template><div><p>{{ modifiedMessage }}</p><button @click="modifyMessage">Modify Message</button></div>
</template><script>
export default {props: ['message'],data() {return {modifiedMessage: this.message};},methods: {modifyMessage() {this.modifiedMessage = 'Modified message';}}
};
</script>
  1. 2、通过触发事件向父组件传递修改后的数据:子组件可以通过 $emit 方法触发一个自定义事件,并将修改后的数据传递给父组件,由父组件来更新数据。
<template><div><p>{{ message }}</p><button @click="modifyMessage">Modify Message</button></div>
</template><script>
export default {props: ['message'],methods: {modifyMessage() {this.$emit('update:message', 'Modified message');}}
};
</script>

父组件可以监听子组件触发的事件,并在事件处理程序中更新数据。

<template><div><ChildComponent :message="parentMessage" @update:message="updateMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {parentMessage: 'Hello from parent'};},components: {ChildComponent},methods: {updateMessage(newMessage) {this.parentMessage = newMessage;}}
};
</script>

三、如何往window上添加自定义属性? 

在Vue应用中,如果需要向window对象添加自定义属性,

方法一、

可以在Vue实例的生命周期钩子函数中进行操作。

以下是一种常见的方法:

// main.js (或者入口文件)
import Vue from 'vue';
import App from './App.vue';Vue.config.productionTip = false;new Vue({render: h => h(App),created() {// 在Vue实例创建时,向window对象添加自定义属性window.customProperty = 'Custom Value';}
}).$mount('#app');

方法二、

使用Vue插件来实现向window添加自定义属性。

// customPlugin.js
const CustomPlugin = {install(Vue) {Vue.prototype.$customProperty = 'Custom Value';window.customProperty = 'Custom Value';}
};export default CustomPlugin;

定义了一个名为CustomPlugin的插件,通过install方法在Vue实例上添加了一个原型属性$customProperty,同时也向window对象添加了自定义属性customProperty

然后,在Vue应用的入口文件中使用这个插件:

// main.js (或者入口文件)
import Vue from 'vue';
import App from './App.vue';
import CustomPlugin from './customPlugin';Vue.config.productionTip = false;Vue.use(CustomPlugin);new Vue({render: h => h(App)
}).$mount('#app');

        通过这种方式,我们可以在整个Vue应用中通过this.$customProperty访问插件定义的属性,并且也可以通过window.customProperty在全局范围内访问这个属性。

四、算法【多数元素】 

1.题目

        给定一个大小为 n 的数组 nums ,返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。

        你可以假设数组是非空的,并且给定的数组总是存在多数元素。

int majorityElement(int* nums, int numsSize) {
}

2.解题

        基本思想是在数组中进行投票,将第一个元素作为候选者,然后对数组中的每个元素进行遍历,如果计数为0,则将当前元素设为候选者,如果和候选者相同则计数加1,否则计数减1。最终选出的候选者就是多数元素。

int majorityElement(int* nums, int numsSize) {int count = 0;int candidate = 0;for (int i = 0; i < numsSize; i++) {if (count == 0) {candidate = nums[i];}if (nums[i] == candidate) {count++;} else {count--;}}return candidate; // if no majority element exists
}

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

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

相关文章

python-opencv图像分割

文章目录 二值化图像骨骼连通域分割 二值化 所谓图像分割&#xff0c;就是将图像的目标和背景分离开来&#xff0c;更直观一点&#xff0c;就是把目标涂成白色&#xff0c;背景涂成黑色&#xff0c;言尽于此&#xff0c;是不是恍然大悟&#xff1a;这不就是二值化么&#xff1…

香橙派 AIpro 的系统评测

0. 前言 你好&#xff0c;我是悦创。 今天受邀测评 Orange Pi AIpro开发板&#xff0c;我将准备用这个测试简单的代码来看看这块开发版的性能体验。 分别从&#xff1a;Sysbench、Stress-ng、PyPerformance、RPi.GPIO Benchmark、Geekbench 等方面来测试和分析结果。 下面就…

DevExpress Installed

一、What’s Installed 统一安装程序将DevExpress控件和库注册到Visual Studio中&#xff0c;并安装DevExpress实用工具、演示应用程序和IDE插件。 Visual Studio工具箱中的DevExpress控件 Visual Studio中的DevExpress菜单 Demo Applications 演示应用程序 Launch the Demo…

PS去水印

去除图片水印 step1&#xff1a;使用套索工具框选图片水印 step2&#xff1a;CTRLshiftU 去色 step3&#xff1a;CTRLL 色阶 step4&#xff1a;使用第三根吸管去点击需要去掉的图片水印 成功去掉 去掉文字水印 也可按照上述方法去除

计算机网络 期末复习(谢希仁版本)第1章

大众熟知的三大网络&#xff1a;电信网络、有线电视网络、计算机网络。发展最快起到核心的是计算机网络。Internet是全球最大、最重要的计算机网络。互联网&#xff1a;流行最广、事实上的标准译名。互连网&#xff1a;把许多网络通过一些路由器连接在一起。与网络相连的计算机…

【多模态】35、TinyLLaVA | 3.1B 的 LMM 模型就可以实现 7B LMM 模型的效果

文章目录 一、背景二、方法2.1 模型结构2.2 训练 pipeline 三、模型设置3.1 模型结构3.2 训练数据3.3 训练策略3.4 评测 benchmark 四、效果 论文&#xff1a;TinyLLaVA: A Framework of Small-scale Large Multimodal Models 代码&#xff1a;https://github.com/TinyLLaVA/T…

【Unity性能优化】使用多边形碰撞器网格太多,性能消耗太大了怎么办

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 专栏交流&#x1f9e7;&…

【机器学习基础】Python编程04:五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言,它在机器学习领域中的重要性主要体现在以下几个方面: 简洁易学:Python语法简洁清晰,易于学习,使得初学者能够快速上手机器学习项目。 丰富的库支持:Python拥有大量的机器学习库,如scikit-learn、TensorFlow、Keras和PyTorch等,这些…

快团团有货源的供货大团长如何给单个订单发货?

快团团团长给单个订单发货的步骤如下&#xff1a; 登录快团团商家后台&#xff1a;首先&#xff0c;你需要以团长的身份登录快团团的商家后台管理系统。 进入订单管理页面&#xff1a;登录后&#xff0c;在后台导航中找到并点击“订单管理”或类似的选项&#xff0c;进入订单列…

算法人生(19): 从“LangChain的六大组件”看“个人职业规划”

我们今天要说说和大模型有着密切关系的Langchain &#xff0c;它提供了一个平台&#xff0c;让开发者可以更加轻松地训练、部署和管理这些大模型。具体来说&#xff0c;Langchain 可以通过提供高性能的计算资源、灵活的模型管理和部署选项、以及丰富的监控和调试功能&#xff0…

企业软件产品和服务 之 设计保证安全 七项承诺

1. 引言 公司如何保护自己免受数据泄露的影响&#xff1f;标准答案就是&#xff1a; “启用多因素身份验证”——MTA&#xff08;Enable multifactor authentication&#xff09;。 但是&#xff0c;目前很多公司仍然盲目地只使用密码作为唯一的身份来源。 网络安全的核心是…

【分享】两种方法设置PDF“打开密码”

想要保护PDF文件的私密性&#xff0c;只允许特定人查看&#xff0c;我们可以给PDF设置“打开密码”&#xff0c;这样只有知道密码的人才可以打开文件。如果小伙伴们不知道如何设置&#xff0c;就一起看看以下两种方法吧&#xff01; 方法1&#xff1a;使用PDF编辑器 大部分PD…

HarmonyOS(二十四)——Harmonyos通用事件之触摸事件

1.触摸事件。 触摸事件是HarmonyOS通用事件的一种事件之一&#xff0c;当手指在组件上按下、滑动、抬起时触发。 名称是否冒泡功能描述onTouch(event: (event?: TouchEvent) > void)是手指触摸动作触发该回调&#xff0c;event返回值见下面TouchEvent介绍。 2. TouchEve…

埃隆·马斯克 - 从梦想家到改变世界的企业家

埃隆马斯克 - 从梦想家到改变世界的企业家 本文内容是埃隆马斯克传的重点章节精华提炼&#xff0c;介绍了马斯克传奇一生 参考资料内容&#xff1a;埃隆马斯克传&造梦者埃隆马斯克 参考资料在文末获取&#xff0c;关注我&#xff0c;分享优质前沿资料&#xff08;IT、运…

交互设计专业解析:发展前景和薪资待遇

交互式设计专业是一门旨在帮助人们更好地与数字产品和服务互动的设计学科。交互式设计专业涉及人机交互、用户体验设计、用户界面设计等多个不同领域。交互式设计是当今数字时代不可缺少的一部分。它能为用户提供更好的体验和更高效的功能&#xff0c;为企业创造更高的价值和影…

LabVIEW储油罐监控系统

LabVIEW储油罐监控系统 介绍了基于LabVIEW的储油罐监控系统的设计与实施。系统通过集成传感器技术和虚拟仪器技术&#xff0c;实现对储油罐内液位和温度的实时监控&#xff0c;提高了油罐监管的数字化和智能化水平&#xff0c;有效增强了油库安全管理的能力。 项目背景 随着…

买卖股票的各种最佳时机问题

买卖股票的最佳时机 分析 根据题意可知&#xff0c;我们只需要找出来一个最小价格的股票和一个最大价格的股票&#xff0c;并且最小价格的股票出现在最大价格的股票之前。 如果尝试使用暴力解法&#xff0c;时间复杂度为O(N^2)&#xff0c;对于题目中给的长度&#xff0c;显然…

金士顿U盘被写保护的解决方法

1.适用的U盘芯片信息 USB设备ID: VID 0951 PID 1666 设备供应商: Kingston 设备名称: DataTraveler 3.0 设备修订版: 0110 产品制造商: Kingston 产品型号: DataTraveler 3.0 产品修订版: PMAP 主控厂商: Phison(群联) 主控型号: PS2251-07(PS2307) - F/W 08.03.50 [2018-…

从学士-硕士-博士-博士后-副教授-教授-优青-杰青-长江-院士:一文看懂学术巨人的成长历程

会议之眼 快讯 学术之路&#xff0c;如同攀登一座高耸入云的山峰&#xff0c;需要毅力、智慧和不断的求知探索。从奠定基础的学士&#xff0c;到站在学术巅峰的院士。这条成长之路充满了挑战和机遇。 如果把学术界比作王者荣耀&#xff0c;那么学者们的成长历程就像是在进行一…

SpringBoot-SchedulingConfigurer源码初识:理解定时任务抛异常终止本次调度,但不会影响下一次执行调度

SchedulingConfigurer源码初识&#xff1a;理解定时任务抛异常终止本次调度&#xff0c;但不会影响下一次执行调度 EnableSchedulingScheduledAnnotationBeanPostProcessor进入finishRegistration方法 ScheduledTaskRegistrar处理触发器任务&#xff08;TriggerTask&#xff09…