91-弹框案例——父传子——子传父
通过@fn='chanClickResult'把子组件和父组件关联起来!
通过点击子组件,实现父组件内的值的变化!
效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>91-弹框案例——父传子——子传父</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body, #app1{
width: 100%;
height: 100%;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.3);
position: fixed;
top:0;
left: 0;
}
.content {
width: 220px;
height: 160px;
background-color: #fff;
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
.msg {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
height: 80px;
text-align: center;
color: gray;
font-size: 14px;
}
.bottom {
display: flex;
height: 40px;
line-height: 40px;
text-align: center;
}
.bottom div {
flex: 1;
color: green;
}
.bottom div:nth-of-type(1) {
border-right: 1px solid #eee;
color: red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<p>点击结果:{{clickResult}}</p>
<wrapper :obj="textObj" @fn="chanClickResult"></wrapper>
<!-- 通过@fn='chanClickResult'把子组件和父组件关联起来! -->
</div>
</body>
<template id="tmpl">
<!-- 子组件内容 -->
<div class="wrapper" v-show="isShowWrapper">
<div class="content">
<p class="title">{{obj.title}}</p>
<div class="msg">{{obj.msg}}</div>
<div class="bottom">
<div @click="hdClick(obj.cancelTxt)">{{obj.cancelTxt}}</div>
<div @click="hdClick(obj.submitTxt)">{{obj.submitTxt}}</div>
</div>
</div>
</div>
</template>
<script>
let wrapper = {
template:"#tmpl",
props:["obj"],
// 通过props传值
data(){
// 子组件的data一定要写成函数形式,并且返回数据
return{
isShowWrapper:true
}
},
methods:{
hdClick(val){
this.isShowWrapper = false;
// 子传父,触发@fn
this.$emit("fn", val)
}
}
}
new Vue({
el: '#app1',
data: {
textObj: {
title: 'bug提示111',
msg: '亲,你还有53633个bug,是否要处理?',
cancelTxt: '忽略,下班',
submitTxt: '加班处理22'
},
clickResult:""
},
components:{
wrapper
},
methods:{
chanClickResult(val){
this.clickResult = val
}
}
})
</script>
</html>