一、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>

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
}