Vue vue-property-decorator框架下 对于@PropSync 跨2代传值 思考

当我们遇到跨2代组件传值，但是又不想依赖Vuex的重或者担心EventBus会搅乱代码时，我们也可以用多层的@PropSync传递来解决问题

祖节点

标签


js
private title = '';

created() {
    this.title = 某函数返回值;
}

父节点

我们可以什么都不做，只接受祖节点传递的productName。

标签


js
@PropSync('productName', {type: String}) syncedProductName!: string;

子节点

子节点数据更新后打印只会走syncedProductName的get，根据vue的单向数据流设计理念需要等到下一个事件循环才会更新syncedProductName。

标签


js
@PropSync('productName', {type: String}) syncedProductName!: string;

private async save() {
    try{
        //await httpsave成功
        //假如此时this.product_name是从"我是张杰伦"改成"我是张杰伦1"
        this.syncedProductName = this.product_name;
        console.log('syncedProductName ---' + this.syncedProductName );// 打印 我是张杰伦
        await this.$nextTick();
        console.log('syncedProductName ---' + this.syncedProductName );// 打印 我是张杰伦1
    } catch () {
    
    }
}