Vue 3监视属性未更新

Question

在我创建的笔中，子组件做两件事，它监视道具并有一个发出两个值的方法。

处理发出的值的父组件修改prop和组件。但是，子组件永远不会触发它的watch事件。

看这支笔

日志:

"Emiting values up"
"Form state listener fired"
"Form state has changed"
"move listener fired"
"activeComponent has changed"
"Foo: About to unmount"
"Foo: Unmounted"

"Form state listener fired"
"Form state has changed"

一个日志显示"Foo: formState changed".

为什么守望者不开火?

Answer 1

我在我的Vue 2 CLI沙箱应用程序中构建了几个测试组件，但希望它能够足够转化为Vue 3来帮助您解决问题。此外，我不确定它是否导致了您的问题，但您可能需要查看此事件名称文档。

Parent.vue

<template>
<div class="parent">
<h3>Parent.vue</h3>
<hr>
<child :formState="formState" @form-state-event="updateFormState" />
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
formState: 'Initial State'
}
},
methods: {
updateFormState(newState) {
console.log('updateFormState');
this.formState = newState;
}
}

}
</script>

Child.vue

<template>
<div class="child">
<h3>Child.vue</h3>
<div class="row">
<div class="col-md-6">
<label>Form State From Parent (Prop):</label>
<span>{{ dataFormState }}</span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-sm btn-secondary" @click="changeAndEmit">Emit new form state</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
formState: {
type: String,
required: true
}
},
data() {
return {
dataFormState: this.formState,
clickCounter: 1
}
},
watch: {
formState(newValue) {
this.dataFormState = newValue;
}
},
methods: {
changeAndEmit() {
console.log('Emitting values up')
this.$emit("form-state-event", "New form state " + this.clickCounter++);
}
},
}
</script>
<style scoped>
label {
font-weight: bold;
margin-right: 0.5rem;
}
</style>