ToB企服应用市场:ToB评测及商务社交产业平台
标题:
【前端口试3+1】18 vue2和vue3父传子通讯的差别、props转达的数据在子组件
[打印本页]
作者:
钜形不锈钢水箱
时间:
2024-6-11 11:39
标题:
【前端口试3+1】18 vue2和vue3父传子通讯的差别、props转达的数据在子组件
一、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
}
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4