vue.js - Vue 3 观察属性不更新
问题描述
在我创建的笔中,子组件做了两件事,它监视道具并有一个发出两个值的方法。
处理发出值的父级会修改 prop 并更改组件。但是,子组件永远不会触发其监视事件。
日志:
"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"
。
观察者怎么不开火?
解决方案
我在我的 Vue 2 CLI 沙盒应用程序中构建了几个测试组件,但希望它能够转换到 Vue 3 以帮助您解决问题。此外,不确定它是否会导致您的问题,但您可能需要查看此事件名称文档。
父.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>
孩子.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>
推荐阅读
- xamarin - 为什么我的文件 xaml 和文件 cs 是分开的
- java - 如何在 Maven 中使用“.jar”之外的资源构建 Java 应用程序
- angular - 打字稿类型数组不显示数据
- solr - Apache Solr 组返回所有值
- arm - FPU version for Cortex-M microcontrollers
- vue.js - 如何在Vue中延迟加载插件?
- java - Improving the run time and style of string compare method java?
- sql - 使用 SQLite 计算过去 29 天内新用户的订单总数
- mysql - Mac OS Mojave 导入 MySQLDB 导入麻烦
- vagrant - 使用 Parallels 和 Vagrant 的 Laravel Homestead 无法扩展更多磁盘大小