vue组件点击子组件如何更新父组件的数据?
How can I update data from parent component when I click child component on the vue component?
我的第一个组件(子组件)是这样的:
<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]" 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>
如果代码执行,成功调用父组件的createImage方法。 item
的控制台日志显示值
但是我的问题是父组件上的数据没有成功更新
我该如何解决这个问题?
您真的应该养成使用 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)
我的第一个组件(子组件)是这样的:
<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]" 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>
如果代码执行,成功调用父组件的createImage方法。 item
的控制台日志显示值但是我的问题是父组件上的数据没有成功更新
我该如何解决这个问题?
您真的应该养成使用 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)