父组件
<template>
<div>
<h2>父组件</h2>
<child-component @add-data="addData"></child-component>
<div>
<h3>父组件数据:</h3>
<ul v-for="(item, index) in dataList" :key="index.id">
<li>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import ChildComponent from '../../components/husbandBwox/HusbandBwox.vue';
export default {
components: {
ChildComponent
},
data() {
return {
dataList: []
};
},
methods: {
addData(data) {
this.dataList.push(data);
}
}
};
</script>
子组件
<template>
<div>
<h3>子组件</h3>
<div v-for="(item, index) in items" :key="index.id" @click="addItem(item)">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
},
methods: {
addItem(item) {
this.$emit('add-data', item);
}
}
};
</script>