Vue.js 有没有可能观看注入的属性

我正在构建一个使用Vue 3的应用程序，并在父组件中提供一个属性，随后将该属性注入到多个子组件中。对于被注入此属性的组件，是否有任何方法可以监视其更改

父组件看起来类似于：

<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>

导出默认值{
名称：“应用程序”，
数据（）{
返回{
客户：{}
}
},
方法：{
更新\u客户端（客户端）{
this.client=client
}
},
提供（）{
返回{
客户：这个，客户
}
},
}

子组件看起来像：

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

导出默认值{
名称：'ChildComponent'，
注入：['client']，
观察：{
客户机（新客户机、旧客户机）{
log（'new client:'，new_client）；
}
}
}

我试图做到这一点，当提供的变量在父组件中更新时，应该通知注入它的子组件。由于某些原因，当客户端更新时，不会调用客户端监视方法

有没有更好的方法来实现这一点

更新

---

在进一步测试之后，我发现这里有一个更大的问题，在子组件中，即使在父组件中更新了客户机之后，客户机属性仍然是原始的空对象，并且不会得到更新。由于提供的属性是反应性的，所有注入的位置都应自动更新。

您的手表需要使用

deep

例子：

导出默认值{
名称：'ChildComponent'，
注入：['client']，
观察：{
客户：{
处理程序：（新客户端，旧客户端）=>{
log（'new client:'，new_client）；
},
深：是的
}
}
}

出于某种原因，我实现这一点的唯一方法是只更新初始注入对象的属性，而不是替换整个对象。尽管设置了

deep:true

，但我也无法查看

注入的属性

更新的父组件：

<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 = client
    }
  },
  provide() {
    return {
      client: this.client
    }
  },
}
</script>

<template>
  <button @click="get_client">Get client</button>
</template>
<script>
export default {
  name: 'ChildComponent',
  inject: ['client'],
  methods: {
    get_client() {
      console.log('updated client: ', client);
    }
  }
}
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
客户：{}
}
},
方法：{
更新\u客户端（客户端）{
this.client.client=client
}
},
提供（）{
返回{
客户：这个，客户
}
},
}

更新的子组件：

<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 = client
    }
  },
  provide() {
    return {
      client: this.client
    }
  },
}
</script>

<template>
  <button @click="get_client">Get client</button>
</template>
<script>
export default {
  name: 'ChildComponent',
  inject: ['client'],
  methods: {
    get_client() {
      console.log('updated client: ', client);
    }
  }
}
</script>


获取客户
导出默认值{
名称：'ChildComponent'，
注入：['client']，
方法：{
get_client（）{
console.log（'updated client:'，client）；
}
}
}
您是否向注入的
客户机添加了反应性？是的，因为它的值是从data（）中的属性设置的，所以它是自动响应的。将deep添加到watch config没有帮助