vue界面传值(子父组件)
程序员文章站
2022-06-10 20:27:45
...
父组件
<template>
<div>
<div class="rootViewstyle">
<titleview model="1123" @touch="touchbtn"></titleview>
</div>
</div>
</template>
<script>
import titleview from "./thePaperTitleView.vue"
export default {
components: {
titleview
},
data () {
return {}
},
methods: {
touchbtn(one,two) {
alert(two)
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.rootViewstyle {
margin: 20px 20px;
background-color: white;
}
</style>
子组件
<template>
<div class="titleViewstyle">
<div id="titleshilinestyle"></div>
<!--头视图内容-->
<h4 align="center">
<span class="titlenamestyle">
{{model}}:
<strong class="titleContentstyle">数学 </strong>
</span>
<span class="titlenamestyle">
考试时间:
<strong class="titleContentstyle">2016-12-08 11:01:14 </strong>
</span>
<span class="titlenamestyle">
监考教师:
<strong class="titleContentstyle">暂无 </strong>
</span>
<span class="titlenamestyle">
总题数:
<strong class="titleContentstyle">12题 </strong>
</span>
<span class="titlenamestyle">
判卷老师:
<strong class="titleContentstyle">王木木 </strong>
</span>
</h4>
<!--虚线-->
<div style="border-bottom: 1px dashed #ecf1f9; margin: 20px 20px"></div>
<span class="titlenamestyle">
客观部分:16分
</span>
<div style="border-bottom: 1px solid #ecf1f9; margin: 20px 20px"></div>
<button @click="touchbtnone"> 确定</button>
</div>
</template>
<script>
export default {
name: 'hello',
props:['model'],
data () {
return {}
},
methods:{
touchbtnone() {
this.$emit('touch',"123","333")
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.titleViewstyle {
height: 300px;
}
#titleshilinestyle {
height: 50px;
margin-bottom: 20px;
border-bottom: 1px solid #ecf1f9;
}
.titleContentstyle {
color: #636363;
}
.titlenamestyle {
font-size: 18px;
font-weight: normal;
padding: 20px;
}
</style>
上一篇: [MFC]CString对象的提高
下一篇: C#判断链接图片是否存在