当我单击 vue 组件上的子组件时，如何从父组件更新数据? [英] How can I update data from parent component when I click child component on the vue component?
问题描述
我的第一个组件(子组件)是这样的:
...</模板><脚本>导出默认{...方法: {添加照片() {const 数据 = { id_product: this.idProduct}const item = this.idImagethis.$store.dispatch('addImage', data).then((响应) => {this.$parent.$options.methods.createImage(item, response)});},}}如果调用了addPhoto方法，它会调用ajax然后得到响应ajax
我想将响应 ajax 和另一个参数发送到方法 createImage.方法 createImage 位于父组件(第二个组件)
我的第二个组件(父组件)是这样的:
<div><ul class="list-inline list-photo"><li v-for="项目中的项目"><div v-if="clicked[item]"><img :src="image[item]" alt=""><a href="javascript:;"class="thumb-check"><span class="fa fa-check-circle"></span></a><a v-else href="javascript:;"class="拇指拇指上传"title="添加照片"><span class="fa fa-plus fa-2x"></span></a>
</模板><脚本>导出默认{...数据() {返回 {项目:[1,2,3,4,5],clicked: [],//使用数组，因为您的项目是数字测试:空}},方法: {创建图像(项目，响应){控制台日志(项目)this.$set(this.clicked, item, true)this.test = 项目},}}
如果代码被执行，它成功调用父组件上的 createImage 方法.item 的控制台日志显示值
但我的问题是父组件上的数据没有成功更新
我该如何解决这个问题?
你真的应该养成使用 事件 而不是直接从子组件访问父组件.
在您的情况下，在子异步请求的 then 处理程序中发出一个事件很简单:
.then((响应) => {this.$emit('imageAdded', item);});并在父作用域中监听它:
这样，任何使用该子组件的组件都可以对其 imageAdded 事件做出反应.另外，当 createImage 方法从未在 Vue 实例中被调用时，您无需花时间调试它为什么会被触发.
您的代码无法正常工作，因为您调用 createImage 方法的方式意味着函数内的 this 在调用父组件实例时不会引用父组件实例叫.所以设置 this.clicked 或 this.test 不会影响父实例的数据.
要使用正确的上下文调用父组件的函数，您需要这样做:
this.$parent.createImage(item, response)My first component (child component) like this :
<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>
If the method addPhoto called, it will call ajax and then it will get response ajax
I want to send response ajax and another parameter to method createImage. Method createImage is located in parent component (second component)
My second component (parent component) like this :
<template>
<div>
<ul class="list-inline list-photo">
<li v-for="item in items">
<div v-if="clicked[item]">
<img :src="image[item]" alt="">
<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>
If the code executed, it success call createImage method on parent component. The console log display value of item
But my problem is the data on parent component not success updated
How can I solve this problem?
You really should get in the habit of using events instead of directly accessing the parent component from a child.
In your case, it would be simple to emit an event in the then handler of the child's async request:
.then((response) => {
this.$emit('imageAdded', item);
});
And listen for it in the parent scope:
<child-component @itemAdded="createImage"></child-component>
That way, any component that uses that child component can react to its imageAdded event. Plus, you won't ever need to spend time debugging why the createImage method is firing when it's never being called in the Vue instance.
Your code isn't working because the way you are invoking the createImage method means that the this inside the function will not be referencing the parent component instance when it is called. So setting this.clicked or this.test will not affect the parent instance's data.
To call the parent component's function with the right context, you would need to do this:
this.$parent.createImage(item, response)
这篇关于当我单击 vue 组件上的子组件时，如何从父组件更新数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
