以下是一个示例代码:
父组件:
<template>
<div>
<child-component :data="object" @update-object="updateObject"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
object: {
curWveIndex: 1,
loadingwaveData: false
}
}
},
methods: {
updateObject(newValue) {
this.object = newValue;
}
}
}
</script>
子组件:
<template>
<div>
<button @click="updateObject">Update Object</button>
</div>
</template>
<script>
export default {
props: ['data'],
methods: {
updateObject() {
// 修改object的值
this.data.curWveIndex = 2;
this.data.loadingwaveData = true;
// 触发父组件的update-object事件,并传递新的值
this.$emit('update-object', this.data);
}
}
}
</script>
网友评论