when the vue parent component invokes the child component method, when the data passed by the parent component is used in the method, the data is modified before the method is called, and the data is still the original data when the child component method is called, and it will become the last modified data on the next call.
parent component
//
<template>
<div>
<form action="/">
<van-search placeholder="" v-model="keywords" @search="seachPage()" style="background: default;"/>
</form>
<div class="hot-search-items">
<span>:</span>
<span class="hot-item" v-for="item in hotItems" @click="searchItem(item)">{{ item }}</span>
</div>
<pageList :query="{ keywords: keywords }" :api="api" ref="pageList"></pageList>
</div>
</template>
export default class Search extends Vue {
keywords: string = "";
pullLoading: boolean = false;
list: object[] = [];
hotItems: string[] = ["Javascript", "Vue.js", "get it", ""];
api: string = "/api/page/searchpage";
seachPage () {
(this.$refs["pageList"] as any).onRefresh({ keywords: this.keywords });
}
searchItem (name: string) {
this.keywords = name;
this.seachPage();
}
}
</script>subcomponents
//
...
onRefresh (query_obj: object) {
console.log(this.query);
}interface
Click Javascript, and then click Vue.js to print out Javascript, and then click get it to print out Vue.js
adding a delay function to the searchPage of the parent component can solve this problem. I don"t know if there"s a better solution.