vue.js - 是否可以观看注入(inject)的属性(property)

Question

我正在构建一个使用 Vue 3 的应用程序，我在父组件中提供了一个属性，随后我将其注入(inject)多个子组件。有什么方法可以让注入(inject)此属性的组件观察它的变化吗？

父组件看起来像这样:

<template>
  <child-component/>
  <other-child-component @client-update="update_client" />
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      client: {}
    }
  },
  methods: {
    update_client(client) {
      this.client = client
    }
  },
  provide() {
    return {
      client: this.client
    }
  },
}
</script>

子组件看起来像:

<script>
export default {
  name: 'ChildComponent',
  inject: ['client'],
  watch: {
    client(new_client, old_client) {
      console.log('new client: ', new_client);
    }
  }
}
</script>

我正在努力做到这一点，当提供的变量在父级中更新时，它被注入(inject)的子组件应该得到通知。出于某种原因，客户端更新时不会调用客户端监视方法。

有没有更好的方法来完成这个？

更新

经过进一步测试，我发现这里有一个更大的问题，即使在父组件中更新了客户端之后，子组件中的客户端属性仍然是原始的空对象并且没有得到更新。由于提供的属性是 react 性的，因此它被注入(inject)的所有地方都应该自动更新。

Answer 1

更新

当使用对象 API 响应式定义 (data(){return{client:{}}) 时，即使变量在组件中是响应式的，inject ed 值将是静态的。这是因为 provide 会将其设置为初始设置的值。要使 react 起作用，您需要将其包装在 computed

中

provide(){
  return {client: computed(()=>this.client)}
}

文档: https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity

---

您可能还需要为您的 watch 使用deep

示例:

<script>
  export default {
    name: 'ChildComponent',
    inject: ['client'],
    watch: {
      client: {
        handler: (new_client, old_client) => {
          console.log('new client: ', new_client);
        },
        deep: true
      }
    }
  }
</script>