使Vue.js提供/注入反应性

Question

我正在了解组件与子代，孙代等之间不同的通信方式，这是我第一次了解提供/注入。我可以使它正常工作而无需被动（我知道这是它的设计方式），但是无法使用观察到的对象获得被动行为。假设我有一个嵌套的对象结构，A> B> C，其中A是C的祖父母。我有一个数据属性A，即“页面”，我想在其孙子C中观察到的更改。在A中提供“页面”并在C中注入“页面”，这不是被动的（根据设计）。我以为如果我做这样的事情可能会起作用：

在提供者中：

data() {
    return {
      page: null,
      obj:{currentPage:this.page}
    }
},


provide(){
     return {
       obj: this.obj
     }
  }

在子孙中：

inject: ['obj']

但不是。如果我尝试在孙子组件中使用obj.currentPage，则它是未定义的。

我确定这很简单。我没有得到什么？

Answer 1

嗯，答案始终与我所见的地方完全不同。提供的'obj'对象的反应性没有错。问题在于这样的事实，即该对象未在父数据对象中更新。我假设obj:{currentPage:this.page}发生变化时，this.page中的属性将被更新，但事实并非如此。因此，这里有两个选择，除非我错过了一些事情：首先，在obj上使用watch，更新page属性；或完全忘记obj，并确保将迄今为止对this.page所做的所有更新都改为this.page。这只是确定哪种方法不太麻烦的一种情况。一个有趣的学习练习的所有部分。