Question

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

<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

从小孩到父母时，应使用事件：

{
   methods: {
        clickEvent()
        {
            this.$emit('click', mydata);
        }
}

因此，您可以在父元素中将自己的回调附加到发出的事件，如下所示：

<template>
    <my-child-component @click="theParentMethod" />
</template>

您还可以通过将对象引用从父对象传递给子对象来使用某些反应性，因此，如果在子对象中更改对象，则父对象可以检测到更改。但是，这带有一些反应性陷阱，请参见https://vuejs.org/v2/guide/reactivity.html。

Answer 2

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

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

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

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

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

然后，在孩子中

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

第二，从孩子触发父母的改变

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

在Vue js中访问有关子事件的父项数据

2 个答案: