Vue 父组件调用子组件方法时prop延迟问题

Question

vue父组件调用子组件方法时，当方法中用到父组件传入的数据，在调用方法之前修改数据，调用子组件方法时数据还是原来的数据，下一次调用时才会变成上一次修改的数据。

父组件

// 父组件
<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>

子组件

// 子组件
...
onRefresh (query_obj: object) {
    console.log(this.query);
}

界面

点击 Javascript，然后再点击 Vue.js 打印出来的是 Javascript，再点击 get it 打印出来的是 Vue.js

在父组件的 searchPage 中加一个延时函数可以解决这个问题。不知道有没有更好的解决方法。

Answer 1

传递是需要一点时间的，你最好是在组件里面通过监听值，然后再做你要做的事

Answer 2

用调用前赋值this.$nextTick(执行调用) 试试