组件不更新属性

Question

我有两个组成生物体：

• 过滤器组件
• 表格组件

这两个组件都将呈现在一个页面中。
filter 组件会将 props 传递给 table 组件以更新 table 中的数据。这是我的代码的简单部分。

FilterComponent

passUpdateToParent() {
  this.$emit("update", this.filter) // I just emit this variable
},

processResetFilter() {
  this.filter = {
    search: {},
    value: ""
  }
  this.passUpdateToParent()
},

TableComponent

...

props : {
 filter: {default : () => ({}), 
 ... // another props
},
methods:{
 testGetFilter(){
   console.log(this.filter) // this props not update if I call in one time, but when I call in twice this props updated.
 }
}

<template>
 <section>
  {{ filter }} <!-- updated properly -->
 </section>
</template>

---

PageComponent

components: {
 FilterComponent: () => import("@/components/FilterComponent"),
 TableComponent: () => import("@/components/TableComponent"),
},
data :() => ({
 filter :{}
}),
methods : {
 processGetFilter(value){
  this.filter = value
 },
}

<template>
 <section>
   <filter-component @update="processGetFilter" />
   <table-component :filter="filter" />
 </section>
</template>

我不知道为什么当我在我的方法中调用道具时我的组件没有更新道具，但是如果我将其渲染或打印到 vue 模板中，组件会正确更新。

PS：我使用的是 nuxt v2.11。

Answer 1

你没有在filter-component中绑定filter

---

直接更新 props 不是一个好主意，可能会导致错误。

为您的子组件使用computed，而不是直接更新道具

过滤器组件

// update the computed filter instead of props value
<input v-model="filter.value"/>

....
props: {
    value: {
        default: () => {}
    }
},
computed: {
    filter: {
        get() {
            return this.value;
        },
        set(newFilter) {
            this.$emit('input', newFilter)
        }
    }
}

在您的 PageComponent 中：

<filter-component v-model="filter" />