Question

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

＆＃13;

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

＆＃13;

对于C2

＆＃13;

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

＆＃13;

AND 我有另一个组件D

＆＃13;

<object type="Date" singleton="false">
   <property name="StartDate" expression="DateTime.Today" />
</object>

＆＃13;

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

Answer 1

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

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

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

Answer 2

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

只需将要共享的对象作为父级的道具传递即可。然后，当孩子们发出更新的数据时，让父母设置它并使用＆＃34;共享状态＆＃34;将数据流向其孩子。

数据将流动为父 - ＆gt;孩子 - ＆gt;儿童更新 - ＆gt;父接收更新 - ＆gt;所有孩子都更新了。

如何从Vue js中另一个Parent的Child组件获取值？

2 个答案: