Three skills, parent component -> value transfer subassembly (The props), sub-assembly -> parent components pass value ($ EMIT), and a slot (slot); for a separate component for, props are used as component internal injection core content; $ EMIT used to make the individual components by some logic to integrate other components. For example specific point, if you do a car, the wheel is a separate component to be packaged, props refers to the number you want you can set the pattern and conform to the style of the vehicle wheels in accordance with the overall shape of the vehicle, patterns and so on; and $ emit the role is to make these wheels and the whole car can fit perfectly operational.
(1) may be achieved using props pass values between Sons assembly
(2) using this. $ Emit () call the parent component but subassembly implemented method
A. Create a file component files in commponents
II. Component code (written)
index.vue
<template>
<div class="cusdealed">
<div class="submited" v-if="showStatus==1">
<div class="submitRes">
<img class="resImg" src="../../common/img/repectSubmit.png" alt="">
</div>
<div class="submitTip tipwidth">该单据已经提交过了，不用重复提交哦！</div>
</div>
<div class="submited" v-if="showStatus==2">
<div class="submitRes">
<img class="resImg" src="../../common/img/invalid.png" alt="">
</div>
<div class="submitTip">单据已失效，不能扫单入库！</div>
</div>
<div class="submited" v-if="showStatus==3">
<div class="submitRes">
<img class="resImg" src="../../common/img/invalid.png" alt="">
</div>
<div class="submitTip">找不到该单据，不能扫单入库！</div>
</div>
</div>
</template>
<script type="text/javascript" src="./logic.js"></script>
<style lang="less" scoped>
@import './style.css';
</style>style.less
//样式文件
@import '../../common/less/px2rem.less';
@import '../../common/less/base.less';
.cusdealed {
.submited {
.submitRes {
.px2rem(150);
width: @px2rem;
height: @px2rem;
}
.submitRes {
.px2rem(227);
margin: @px2rem auto 0;
.resImg {
width: 100%;
height: 100%;
display: block;
}
}
.submitTip {
.px2rem(58);
// height: @px2rem;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: @px2rem;
}
.submitTip{
.px2rem(32);
font-size: @px2rem;
}
.tipwidth{
.px2rem(384);
width: @px2rem;
}
.submitTip{
.px2rem(50);
margin: @px2rem auto 0;
}
}
}logic.js
//逻辑文件
import { Spinner } from 'vux'
export default {
name: 'cusDealing',
data() {
return {
showStatus:1
}
},
components: {
Spinner,
},
props: {
// showStatus: Number
},
computed: {
},
watch: {
showStatus(val) {
console.log(val, 'showStatus---')
return val;
}
},
methods: {
},
mounted() {
}
}
III. Usage
Introducing components
page using
html:
<!-- 处理完弹窗 -->
<div class="dealed" :style="'padding-top:'+marginTop+'px;height:'+bodyheight+'px;'" v-if="dealStatus==2">
<div class="dealedContent">
<Cusdealed :showStatus="showStatus"></Cusdealed>
<div class="Iknow" @click="Iknow">我知道了</div>
</div>
</div>js:
Effect
