当我单击 vue 组件上的子组件时，如何从父组件更新数据？

Posted 2023-02-23

【中文标题】当我单击 vue 组件上的子组件时，如何从父组件更新数据？

【英文标题】：How can I update data from parent component when I click child component on the vue component?

【发布时间】：2017-12-19 20:35:54

【问题描述】：

我的第一个组件（子组件）是这样的：

<template>
    ...
</template>
<script>
    export default 
        ...
        methods: 
            addPhoto() 
                const data =  id_product: this.idProduct
                const item = this.idImage
                this.$store.dispatch('addImage', data)
                    .then((response) => 
                         this.$parent.$options.methods.createImage(item, response)
                    );
            ,
         
    
</script>

如果调用addPhoto方法，它会调用ajax，然后会得到响应ajax

我想将响应 ajax 和另一个参数发送到方法 createImage。方法createImage位于父组件（第二个组件）

我的第二个组件（父组件）是这样的：

<template>
    <div>
        <ul class="list-inline list-photo">
            <li v-for="item in items">
                <div v-if="clicked[item]">
                    <img :src="image[item]" >
                    <a href="javascript:;" class="thumb-check"><span class="fa fa-check-circle"></span></a>
                </div>
                <a v-else href="javascript:;" class="thumb thumb-upload"
                   title="Add Photo">
                    <span class="fa fa-plus fa-2x"></span>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    export default 
        ...
        data() 
            return 
                items: [1,2,3,4,5],
                clicked: [], // using an array because your items are numeric
                test: null
            
        ,
        methods: 
            createImage(item, response) 
                console.log(item)
                this.$set(this.clicked, item, true)
                this.test = item
            ,
        
    
</script>

如果代码执行，它会成功调用父组件上的 createImage 方法。 item的控制台日志显示值

但我的问题是父组件上的数据没有成功更新

我该如何解决这个问题？

【问题讨论】：

vuejs.org/v2/guide/events.html

@thanksd，我知道。但就我而言，它不起作用

在父组件的哪个位置引用了子组件？他们真的是父子还是他们都是高阶组件的子？

【参考方案1】：

您确实应该养成使用events 的习惯，而不是直接从子组件访问父组件。

在您的情况下，在孩子的异步请求的 then 处理程序中发出事件很简单：

.then((response) => 
  this.$emit('imageAdded', item);
);

并在父范围内监听：

<child-component @itemAdded="createImage"></child-component>

这样，任何使用该子组件的组件都可以对其imageAdded 事件做出反应。另外，您永远不需要花时间调试为什么 createImage 方法在 Vue 实例中从未被调用时会触发。

---

您的代码不起作用，因为您调用createImage 方法的方式意味着函数内部的this 在调用时不会引用父组件实例。所以设置this.clicked或this.test不会影响父实例的数据。

要使用正确的上下文调用父组件的函数，您需要这样做：

this.$parent.createImage(item, response)