element子组件点击button按钮向父组件传递一个包含多个数据的data,父组件接收,并分别在父组件的label里显示出来请写出完整代码
时间: 2023-12-27 18:01:50 浏览: 22
父组件代码:
```
<template>
<div>
<label v-for="(item, index) in dataList" :key="index">{{ item }}</label>
<child-component @send-data="handleData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
dataList: []
}
},
methods: {
handleData(data) {
this.dataList = data;
}
}
}
</script>
```
子组件代码:
```
<template>
<div>
<button @click="sendDataToParent">发送数据到父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
data: ['数据1', '数据2', '数据3']
}
},
methods: {
sendDataToParent() {
this.$emit('send-data', this.data);
}
}
}
</script>
```
在父组件中,我们使用 `v-for` 来遍历 dataList 数组,将其中的数据显示在 label 标签中。
在子组件中,我们定义了一个名为 `data` 的数组,用来存储要传递给父组件的数据。当点击按钮时,我们使用 `$emit` 方法来触发自定义事件 `send-data`,并将 `data` 数组作为参数传递给父组件。
在父组件中,我们监听子组件的 `send-data` 事件,然后将接收到的数据保存到 `dataList` 数组中。这样,当子组件触发了 `send-data` 事件时,我们就能在父组件中接收到数据,并将其显示在页面上。