Vue 2避免直接更改道具，因为该值将被覆盖

Question

我读了文档，也读了类似的帖子，但仍然没有得到

这是我收到的警告

避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。

子组件：

<div>
<v-container class="ma-0 pa-0">
<v-col class="pa-0" cols="8">
<v-text-field
class="search-field ma-0"
flat
color="black"
:label="$t('keyWord')"
v-model="searchKeyWord"
@click:clear="clearFilterByKeyWord"
clearable
></v-text-field>
</v-col>
</v-row>
<v-btn
depressed
class="black--text my-10 rounded-0"
color="primary"
@click="globalFilter"
>{{ $t('search_subsidiary') }}</v-btn
>
</v-container>
</div>
</template>
<script>
export default {
props: {
dataValue: {
require: true
},
dataValueOriginalCount: {
require: true
}
},
data() {
return {
searchKeyWord: '',
};
},
methods: {
clearFilterByKeyWord() {
this.searchKeyWord = '';
this.unfilterStoComponents();
},
globalFilter() {
//global function which invoke all on click Search button
if (this.searchKeyWord && this.searchKeyWord !== '') {
this.filterByKeyWord();
}
this.$emit('changeData', this.dataValue);
this.$emit('changeDataOriginal', this.dataValueOriginalCount);
},

}
};
</script>

父组件：

<v-data-table
:headers="headers"
:items="stoSystems"
v-show="isLoading"
v-if="areResultsVisible"
@dataValue="stoSystems = event"
@dataValueOriginalCount="originalstoSystemsCount = event"
>
<template v-slot:item.name="{ item }">
<td >
{{ item.name }}
</td>
</template>
</v-data-table>
<script>
export default {
data() {
return {
headers: [
{
text: this.$t('id'),
value: 'id'
},
{
text: this.$t('nav_item_systems'),
value: 'name',
sortable: false
},

],
Systems: [],
originalstoSystemsCount: [],

};
},
async mounted() {
try {
let res = await axios.get('blbalbla/systems');
this.Systems = res.data;
this.originalstoSystemsCount = res.data;
} catch (error) {
console.error(error);
}
}
};
</script>```

Answer 1

所有这些都表明，在子组件中，您不应该直接更改dataValue或dataValueOriginalCount，而是将data属性设置为这些值，并在子组件中更改数据属性，如下所示：

data() {
return {
originalCount: this.dataValueOriginalCount,
};
}

现在，在您的子组件中，您可以使用originalCount，它将具有dataValueOriginalCount的任何值。

您可以随意更改父组件中的dataValueOriginalCount，因为此时它们不是道具。