Vue 3React性差异Provide/Inject vs this.$slots.default

mqkwyuun  于 7个月前  发布在  Vue.js
关注(0)|答案(1)|浏览(76)

目前,我正在开发一个PR to the primefaces/primevue存储库,它将提供将Column组件 Package 在DataTable的自定义组件中的能力。(参见前面的链接)我添加了一种方法,通过使用Provide/Inject函数,使列组件向父DataTable注册自己,而不是像目前在DataTable中那样依赖this.$slots.default来查找子列组件。
但是我发现了一个问题。当我的 Package 器列的属性发生变化时,呈现的DataTable并没有反映出来。在深入挖掘之后,我注意到,当this.$.vnode向DataTable注册自己时,它似乎失去了它的React能力。
我可以在Vue 3 Playground中用一个小例子来重现这一点。点击按钮,你会看到,只有当通过this.$slots.default访问时,Child组件值prop中的更改才会被拾取。我还尝试在Parent.vue中使用以下命令来显式地响应registeredChildren数组:

setup(){
  const registeredChildren = reactive([])
  return {registeredChildren}
}

字符串
我的问题是:使用this.$slots.default访问vnode和将vnode保存在数组中有什么区别?如何确保通过使用Provide/Inject反映vndoe中的更改?
任何和所有的帮助是非常感谢,谢谢!

zynd9foi

zynd9foi1#

碰巧的是,在发布问题后不久,我随机尝试使用this.$而不是this.$.vnode,现在它工作了。
所以问题的答案是:如果你传入正确的值,就没有区别。
我更新了操场的例子。

相关问题