如何从 Vue js 中另一个 Parent 的 Child 组件中获取价值?
Posted
技术标签:
【中文标题】如何从 Vue js 中另一个 Parent 的 Child 组件中获取价值?【英文标题】:How to get value from the Child component of another Parent in Vue js? 【发布时间】:2018-03-09 07:47:39 【问题描述】:我有组件 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>
AND我还有另一个组件 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 组件中,我需要访问这两个组件的对象。我可以使用状态或任何其他可能的方式吗?
【问题讨论】:
How can I share data between non parent-child components in Vue的可能重复 不,我认为这个有点棘手。无法使用事件总线。 【参考方案1】:有很多方法可以实现您的目标。
您可以给每个子组件一个“ref=...”并直接从父组件访问它们。 (假设 A 是 D 的孩子) 您可以将 http 请求的答案提交给状态 您可以使用数据作为参数向上向父组件发出事件并将其存储(假设 A 是 D 的子组件) 您可以使用 eventbus 将数据从孩子传递给他们的父母但是,如果您想从组件 D 触发搜索,您可能需要首先在 C1 和 C2 上添加一个自定义事件侦听器 (eventbus.$on...)。 (你也可以传递一个回调函数)
【讨论】:
不,A 是孩子 C1 和 C2 的父母【参考方案2】:你可以调整我在这里描述的模式Vue.js edit variables in dynamic components
只需将您想要共享的对象作为来自父级的道具传递。然后,随着子节点发出更新的数据,让父节点对其进行设置,数据将向下流向具有“共享状态”的子节点。
数据将流向父->子->子更新->父接收更新->所有子更新。
【讨论】:
以上是关于如何从 Vue js 中另一个 Parent 的 Child 组件中获取价值?的主要内容,如果未能解决你的问题,请参考以下文章
$emit an event from child to parent in vue.js, es6 语法
如何解决 Uncaught ReferenceError: bus is not defined? (vue.js 2)