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

Question

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

<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 方法。怎么做？

Answer 1

您似乎在问两个不同的问题。

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

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

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

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

然后，在 child 身上

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

第二，从子级触发父级的变化

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