【前端口试3+1】18 vue2和vue3父传子通讯的差别、props转达的数据在子组件 ...

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

   1、Vue2

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

1. <!-- ParentComponent.vue -->
2. <template>
3.   <ChildComponent :message="parentMessage" />
4. </template>
6. <script>
7. import ChildComponent from './ChildComponent.vue';
9. export default {
10.   data() {
11.     return {
12.       parentMessage: 'Hello from parent'
13.     };
14.   },
15.   components: {
16.     ChildComponent
17.   }
18. };
19. </script>

复制代码

1. <!-- ChildComponent.vue -->
2. <template>
3.   <div>{{ message }}</div>
4. </template>
6. <script>
7. export default {
8.   props: ['message']
9. };
10. </script>

复制代码

2、Vue3

          Vue3除了仍然可以使用props来进行父子组件通讯外，Vue 3引入了一个新的API，即attrs和emit。通过attrs，父组件可以向子组件转达属性，而子组件可以通过emit向父组件发送变乱。这种方式使得父子组件之间的通讯更加机动，子组件可以通过emit触发变乱，父组件可以监听这些变乱并做出相应的相应。
          还引入了v-model指令的改进，使得父组件可以通过v-model指令双向绑定数据到子组件。这样父组件可以直接修改子组件中的数据，而不需要通过变乱和属性来进行通讯。
  在Vue 3中，可以使用attrs属性转达数据的示例代码如下：

1. <!-- ParentComponent.vue -->
2. <template>
3.   <ChildComponent v-bind="attrs" @child-event="handleChildEvent" />
4. </template>
6. <script>
7. import ChildComponent from './ChildComponent.vue';
9. export default {
10.   data() {
11.     return {
12.       attrs: {
13.         message: 'Hello from parent'
14.       }
15.     };
16.   },
17.   components: {
18.     ChildComponent
19.   },
20.   methods: {
21.     handleChildEvent(data) {
22.       console.log('Received data from child:', data);
23.     }
24.   }
25. };
26. </script>

复制代码

1. <!-- ChildComponent.vue -->
2. <template>
3.   <button @click="emitEvent">Click me</button>
4. </template>
6. <script>
7. export default {
8.   methods: {
9.     emitEvent() {
10.       this.$emit('child-event', 'Data from child');
11.     }
12.   }
13. };
14. </script>

复制代码

父组件通过attrs属性向子组件转达message属性，子组件通过$emit方法触发child-event变乱，并将数据转达给父组件。父组件可以监听child-event变乱并处理子组件转达的数据
  二、props转达的数据在子组件是否可以修改？

   不能！ 
  在Vue中，props 是单向数据流的，意味着父组件转达给子组件的 props 数据在子组件中是只读的，子组件不能直接修改 props 数据。
  
  ！！！然而，假如子组件需要修改转达下来的数据，可以通过以下方式实现：
          子组件就间接地修改父组件转达下来的数据
          1、在子组件内部使用 data 属性：子组件可以将 props 数据作为初始值，然后在子组件内部将其赋值给 data 属性中的变量，从而可以在子组件内部修改这些数据。

1. <template>
2.   <div>
3.     <p>{{ modifiedMessage }}</p>
4.     <button @click="modifyMessage">Modify Message</button>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   props: ['message'],
11.   data() {
12.     return {
13.       modifiedMessage: this.message
14.     };
15.   },
16.   methods: {
17.     modifyMessage() {
18.       this.modifiedMessage = 'Modified message';
19.     }
20.   }
21. };
22. </script>

复制代码

• 2、通过触发变乱向父组件转达修改后的数据：子组件可以通过 $emit 方法触发一个自定义变乱，并将修改后的数据转达给父组件，由父组件来更新数据。
  

1. <template>
2.   <div>
3.     <p>{{ message }}</p>
4.     <button @click="modifyMessage">Modify Message</button>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   props: ['message'],
11.   methods: {
12.     modifyMessage() {
13.       this.$emit('update:message', 'Modified message');
14.     }
15.   }
16. };
17. </script>

复制代码

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

1. <template>
2.   <div>
3.     <ChildComponent :message="parentMessage" @update:message="updateMessage" />
4.   </div>
5. </template>
7. <script>
8. import ChildComponent from './ChildComponent.vue';
10. export default {
11.   data() {
12.     return {
13.       parentMessage: 'Hello from parent'
14.     };
15.   },
16.   components: {
17.     ChildComponent
18.   },
19.   methods: {
20.     updateMessage(newMessage) {
21.       this.parentMessage = newMessage;
22.     }
23.   }
24. };
25. </script>

复制代码

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

   在Vue应用中，假如需要向window对象添加自定义属性，
  方法一、

  可以在Vue实例的生命周期钩子函数中进行操作。
  以下是一种常见的方法：

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

复制代码

方法二、

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

1. // customPlugin.js
2. const CustomPlugin = {
3.   install(Vue) {
4.     Vue.prototype.$customProperty = 'Custom Value';
5.     window.customProperty = 'Custom Value';
6.   }
7. };
9. export default CustomPlugin;

复制代码

定义了一个名为CustomPlugin的插件，通过install方法在Vue实例上添加了一个原型属性$customProperty，同时也向window对象添加了自定义属性customProperty。
  
  然后，在Vue应用的入口文件中使用这个插件：

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

复制代码

        通过这种方式，我们可以在整个Vue应用中通过this.$customProperty访问插件定义的属性，而且也可以通过window.customProperty在全局范围内访问这个属性。
  四、算法【多数元素】 

   1.题目

          给定一个大小为 n 的数组 nums ，返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。
          你可以假设数组黑白空的，而且给定的数组总是存在多数元素。
  

1. int majorityElement(int* nums, int numsSize) {
2. }

复制代码

2.解题

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

1. int majorityElement(int* nums, int numsSize) {
2.     int count = 0;
3.     int candidate = 0;
5.     for (int i = 0; i < numsSize; i++) {
6.         if (count == 0) {
7.             candidate = nums[i];
8.         }
9.         if (nums[i] == candidate) {
10.             count++;
11.         } else {
12.             count--;
13.         }
14.     }
16.     return candidate; // if no majority element exists
17. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。