javascript - Prop 正在变异 VueJs

Question

我收到此错误:“避免直接改变 Prop ，因为只要父组件重新渲染，该值就会被覆盖。相反，请根据 Prop 的值使用数据或计算属性。 Prop 被改变:“过滤器”” ，在我尝试将适合的部分从父级移动到子级之后。模板正在呈现，但是当我输入输入时出现错误。

child 时期

<b-form-input
         v-model="filter"
         type="search"
         id="filterInput"
         placeholder="Type to Search"
    ></b-form-input>
<b-button :disabled="!filter" @click="filter = ''">Clear</b-button>

export default {
    name:'ExampleSearch',
    props:['filter'],

}

在父级

   <ExampleSearch></ExampleSearch>

    <b-table
            ...code....
            :fields="fields"
            ...code....
    >

getExample(context) {
   ..code..
   if (typeof context !== 'undefined' && context.filter) {
         url += `&filter=${context.filter}`;
   }
   ..code..
}

Answer 1

<b-button :disabled="!filter" @click="filter = ''">Clear</b-button>处的点击事件正在变异filter直接从子节点支持父节点。这就是您收到此错误的原因。

为了避免这种情况，您可以修改 click事件监听器如下所示，您 emit给家长的事件

...
<b-button :disabled="!filter" @click="$emit('clearFilter')">Clear</b-button>
...

然后在父级您可以通过以下方式收听此事件

...
<ExampleSearch :filter="filter" @clearFilter="filter=''" ></ExampleSearch>
...

如果您使用的是 vue 2.3.0，您可以使用 .sync修饰符是上面表达式的简写。 了解更多相关信息here