【前端面试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,一经查实,立即删除!

相关文章

常用位算法

1&#xff0c;位翻转 n^1 &#xff0c;n 是0 或 1&#xff0c;和 1 异或后位翻转了。 2&#xff0c; 判断奇偶&#xff0c;n&1&#xff0c;即判断最后一位是0还是1&#xff0c;如果结果为0&#xff0c;就是偶数&#xff0c;是1 就是奇数。 获取 32 位二进制的 1 的个数&a…

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…

Python如何查询数据库:深入探索与实践

Python如何查询数据库&#xff1a;深入探索与实践 在数据驱动的世界中&#xff0c;Python作为一种强大且灵活的语言&#xff0c;自然成为了数据库查询的得力助手。本文将通过四个方面、五个方面、六个方面和七个方面&#xff0c;详细探讨Python如何查询数据库&#xff0c;并力…

elementary OS 8的新消息

原文&#xff1a;Happy Pride! Have Some Updates! ⋅ elementary Blog 这个月&#xff0c;我们为OS 7带来了一些意外惊喜&#xff0c;包括GNOME应用的新版本和邮件应用的重大更新。Wayland也来了&#xff0c;我们有了一种新的方式来管理驱动程序&#xff0c;并且我们现在默认…

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…

AcWing 842. 排列数字——算法基础课题解

AcWing 842. 排列数字 题目描述 给定一个整数 &#x1d45b;&#xff0c;将数字 1∼&#x1d45b; 排成一排&#xff0c;将会有很多种排列方法。 现在&#xff0c;请你按照字典序将所有的排列方法输出。 输入格式 共一行&#xff0c;包含一个整数 &#x1d45b;。 输出格…

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

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

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

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

一道java线程池面试题

线程池面试题 一个线程池的核心线程数为10个&#xff0c;最大线程数为20个&#xff0c;阻塞队列的容量为30。现在提交45个 任务&#xff0c;每个任务的耗时为500毫秒。 请问&#xff1a;这批任务执行完成总共创建几个线程&#xff1f; 请问&#xff1a;这批任务执行完成总计需…

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

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

C语言中的#和##操作符用法

C语言中#和##操作符用法 答&#xff1a;在C语言中&#xff0c;#和##是预处理器&#xff08;preprocessor&#xff09;的操作符&#xff0c;主要用于宏&#xff08;macro&#xff09;的定义中。这两个操作符提供了字符串化和字符串连接的功能。 #操作符 #操作符用于将其后的宏…

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

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

Python语言试卷:深入剖析Python编程的精髓

Python语言试卷&#xff1a;深入剖析Python编程的精髓 在编程的世界里&#xff0c;Python以其简洁、易读和强大的功能赢得了众多开发者的青睐。为了全面检验大家对Python语言的理解程度&#xff0c;本试卷将从四个方面、五个方面、六个方面和七个方面展开深入剖析&#xff0c;…

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

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

Python怎么定义类:深入探索与实战解析

Python怎么定义类&#xff1a;深入探索与实战解析 在Python编程的广阔天地中&#xff0c;定义类是一项基础且至关重要的技能。类作为面向对象编程的核心构造&#xff0c;为我们提供了一种组织和封装代码、创建可重用对象的方式。今天&#xff0c;我们将从四个方面、五个方面、…

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

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