一、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,即
attrs
和emit
。通过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>
- 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 }