如何从Vue js中另一个父级的子组件中获取值？

Question

我有组件 A，它有 2 个子组件 C1 和 C2。 在 C1 组件中，有一个函数可以从与 C2 中相同的源获取数据。 对于 C1

 <template> </template> <script> export default { url = 'abc.com'; name: 'c', data () { return { users:'', }}, methods: { getData: function () { $.get(url, function( data ) { this.users = data; var ab = this.users.ab ; var pq = this.users.pq ; )}; }} } </script>

对于 C2

 <template> </template> <script> export default { url = 'abc.com'; name: 'c', data () { return { users:'', }}, methods: { getData: function () { $.get(url, function( data ) { this.users = data; var cd = this.users.cd ; var rs = this.users.rs ; )}; }} } </script>

而且我还有另一个组件 D

 <template> </template> <script> export default { data () { return { }}, methods: { showDataABCD: function () { // here I want to access all data of users object of C1 and C2] // especially ab, cd }, showDataPQRS: function () { // here I want to access all data of users object of C1 and C2 //especially PQ, RS } } </script>

在这个 D 组件中，我需要访问这两个组件的对象。 我可以使用 state 或任何其他可能的方式吗？

Answer 1

有很多方法可以实现您的目标。

• 你可以给每个子组件一个“ref = ...”并直接从父组件访问它们。 （假设A是D的孩子）
• 您可以将 http 请求的答案提交给状态
• 您可以将数据作为参数向上发送到父组件并将其存储（假设 A 是 D 的子组件）
• 您可以使用 eventbus 将数据从孩子传递给他们的父母

但是，如果您想从组件 D 触发搜索，您可能希望首先在 C1 和 C2 上添加自定义事件侦听器 (eventbus.$on...)。 （你也可以传递一个回调函数）

Answer 2

您可以调整我在此处描述的模式Vue.js edit variables in dynamic components

只需将要共享的对象作为来自父级的道具传递即可。 然后，当孩子们发出更新的数据时，让父级设置它，数据以“共享状态”向下流向其子级。

数据将流向父级 -> 子级 -> 子级更新 -> 父级接收更新 -> 所有子级更新。