在Vue中,如果你发现一个事件或者方法没有如预期那样更新父组件中的属性,可能是由于以下几个原因:
$emit
发出一个事件来通知父组件更新属性,但是父组件没有监听这个事件,那么父组件的属性也不会更新。$emit
发出的事件名称和父组件监听的事件名称不一致,也会导致父组件的属性不会更新。push
, splice
, Vue.set
等),那么Vue可能无法检测到这些变化。<!-- 子组件 -->
<template>
<button @click="increment">Increment</button>
</template>
<script>
export default {
props: ['count'],
methods: {
increment() {
this.$emit('update:count', this.count + 1);
}
}
}
</script>
<!-- 父组件 -->
<template>
<ChildComponent :count="count" @update:count="count = $event" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
count: 0
};
}
}
</script>
$emit
的事件名称和父组件监听的事件名称是否一致。// 修改数组
this.items.splice(index, 1, newValue);
// 修改对象
this.$set(this.obj, 'newKey', newValue);
Vue.nextTick
或者nextTick
方法。this.someData = newValue;
this.$nextTick(() => {
// DOM已更新
});
以上就是在Vue中发出事件但父组件属性未更新的常见问题及解决方案。希望这些信息对你有所帮助。
领取专属 10元无门槛券
手把手带您无忧上云