时间戳

首页 > 解决方案 > 在 Vue js 中访问父级关于子事件的数据

javascript - 在 Vue js 中访问父级关于子事件的数据

问题描述

我有两个组件，一个在另一个内部。我在父组件上有一个单击事件，应该更改子组件的数据值。

<template>
   <div>
      .....
      .....
      <my-component
           :options="options">
      </my-component>
   </div>
.....
.....
</template>

<script>
...
...
data(){
}
methods:{
   clickEvent(array_from_child){
      this.array = array_from_child; //array is in my-component
   }
}
components:{
    ....
}
</script>

我想在子元素更改时触发 clickEvent 方法。怎么做？

标签： javascriptvue.jsvuejs2vue-component

解决方案

好像你在问两个不同的问题。

首先，从父级访问子级的数据：

如果可能，您应该使用子组件将数组传递给子组件props。然后只需更改父级中的数组，任何更改都将反映在子级中。如果数组确实需要在孩子中，那么您可以定义一个方法来检索它。

<template>
    <child-component ref="child">
    </child-component>
</template>

methods: {
    onClick() {
        const myArray = this.$refs.child.getMyArray();
    }
}

然后，在孩子

methods: {
    getMyArray() {
        return this.myArray;
    }
}

二、从child触发parent的变化

在这种情况下，Flame 的回答是最惯用的。在子级中发出自定义事件并在父级中侦听该事件。

推荐阅读