父组件Home引用子组件Board及传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <template>
<div class="home-view">
<div class="home-container">
<div class="container-row">
<Board title="创建应用" description="所见即所得，可拖拉拽快速搭建一个新应用" icon="logo-codepen"></Board>
<Board title="编辑应用" description="选择一个已有应用后可立即调整" icon="logo-codepen"></Board>
</div>
<div class="container-row">
<Board title="导入应用" description="一键导入，支持更加灵活的调整" icon="logo-codepen"></Board>
<Board title="导出应用" description="可导出XML、PY文件" icon="logo-codepen"></Board>
</div>
</div>
</div>
</template>
<script>
import Board from "./Board";
export default {
name: "Home",
components: {
Board
}
};
</script>
|
子组件Board定义参数及获取参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <template>
<div class="std-card-container">
<Card>
<div class="std-left-container">
<Icon :type="icon" />
</div>
<div class="std-right-container">
<h1 class="std-card-title">{{title}}</h1>
<p class="std-card-description">{{description}}</p>
</div>
</Card>
</div>
</template>
<script>
export default {
name: "Board",
props: {
title: String,
description: String,
icon: String,
}
};
</script>
<style lang="less" scoped>
.std-card-container {
overflow:hidden;
.std-left-container {
float: left;
width: 10%;
font-size: 46px;
text-align: center;
}
.std-right-container {
width: 90%;
margin-left: 10%;
padding: 5px 0px;
.std-card-title {
font-size: 18px;
font-weight: 700;
}
.std-card-description {
font-size: 14px;
padding: 10px 0 0;
}
}
}
</style>
|
通过this.$emit(“on-btn-click”)触发父组件方法，并实现等待父组件方法执行完成后再执行子组件方法的剩余逻辑
子组件
handleOk () {
this.$emit('on-ok', run => {
console.log('thenethene')
})
},
父组件
async ok (run) {
this.$Message.success('Clicked ok2');
await this.getResult();
run()
},
vue判断父组件有没有给子组件传事件
子组件：
if( this.$listeners['on-ok']) {
// ...
}
