You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
857 B
39 lines
857 B
1 year ago
|
<template>
|
||
|
|
<!-- 3. 添加自定义事件selected -->
|
||
|
|
<ChildComponentA title="list—data" :list_data="todos" @selected="onSelected"></ChildComponentA>
|
||
|
|
<div>
|
||
|
|
<h3>您选中了{{ selected_status }}</h3>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ChildComponentA from "@/components/ChildComponentA.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {ChildComponentA},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
todos: [
|
||
|
|
'todo-1',
|
||
|
|
'todo-2',
|
||
|
|
'todo-3',
|
||
|
|
'todo-4',
|
||
|
|
'todo-5'
|
||
|
|
],
|
||
|
|
// 1. 定义一个变量，用于接收子组件中回传的数据
|
||
|
|
selected_status: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 2. 创建一个方法处理接收到的数据，映射到本地，同时在使用子组件标签时进行事件绑定
|
||
|
|
onSelected(item) {
|
||
|
|
this.selected_status = item;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|