1、$emit的使用场景
子组件调用父组件的方法并传递数据
注意:子组件标签中的时间也不区分大小写要用“-”隔开
子组件:
<template>
<button @click="emitEvent">点击我</button>
</template>
<script>
export default {
data() {
return {
msg: "我是子组件中的数据"
}
},
methods: {
emitEvent(){
this.$emit('my-event', this.msg)
//通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
}
}
}
</script>
父组件:
<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
<!--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值-->
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
methods: {
getMyEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
}
}
}
</script>
2、$refs的使用场景
父组件调用子组件的方法,可以传递数据
注意:子组件标签中的时间也不区分大小写要用“-”隔开
父组件:
<template>
<div id="app">
<child-a ref="child"></child-a>
<!--用ref给子组件起个名字-->
<button @click="getMyEvent">点击父组件</button>
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "我是父组件中的数据"
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
}
}
}
</script>
子组件:
<template>
<button>点击我</button>
</template>
<script>
export default {
methods: {
emitEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
}
}
}
</script>
3、$on的使用场景
兄弟组件之间相互传递数据
首先创建一个vue的空白实例(兄弟间的桥梁)
import Vue from 'vue'
export default new Vue()
子组件 child- a
发送方使用 $emit 自定义事件把数据带过去
<template>
<div>
<span>A组件->{{msg}}</span>
<input type="button" value="把a组件数据传给b" @click ="send">
</div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
data(){
return {
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send:function(){
vmson.$emit("aevent",this.msg)
}
}
}
</script>
子组件 child-b
而接收方通过 $on监听自定义事件的callback接收数据
<template>
<div>
<span>b组件,a传的的数据为->{{msg}}</span>
</div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
data(){
return {
msg:""
}
},
mounted(){
vmson.$on("aevent",(val)=>{//监听事件aevent,回调函数要使用箭头函数;
console.log(val);//打印结果:我是a组件的数据
this.msg = val;
})
}
}
</script>
父组件:
<template>
<div>
<childa></childa>
<br />
<childb></childb>
</div>
</template>
<script>
import childa from './childa.vue';
import childb from './childb.vue';
export default {
components:{
childa,
childb
},
data(){
return {
msg:""
}
},
methods:{
}
}
</script>
案例:
父组件:
<template>
<div class="qie_huan_medol">
<div class="header">
<div>姓名:{{ uName }}</div>
<div>卡号:{{ uCardno }}</div>
<div>余额:{{ uBalance }}</div>
<div class="data_picker">日期选择:
<el-date-picker v-model="filters.column.create_start_date" type="date" :picker-options="pickerBeginDateBefore " format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始日期" @change="starDate">
</el-date-picker>
<!-- 至 -->
<el-date-picker v-model="filters.column.create_end_date" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerBeginDateAfter" placeholder="结束日期" @change="endDate">
</el-date-picker>
</div>
</div>
<div class="main">
<div class="left">
<z-nav-card-grid :items="items" type="list" @tapped="tapped"/>
</div>
<div class="right">
<!-- 可切换组件位置 在这里通过 父传子的两种传参之一 动态调用 子组件定义的 方法-->
<component :is="currentView" :ref="shuxing" />
</div>
<!-- -->
<el-button type="primary" icon="fa fa-fw fa-arrow-left" class="BtnStyle" @click="GoBack">返回</el-button>
</div>
</div>
</template>
<script>
import * as log from 'loglevel'
import _ from 'lodash'
import axios from "axios";
import properties from "../properties";
import store from "store";
import vEvents from '../utils/v_events'
import NavCardGrid from '../component/nav_card_grid.vue'
import RechargeRecord from '../view/query/steps/recharge-record.vue'
import ExpenseCalendar from '../view/query/steps/expense-calendar.vue'
import MedicalRecord from '../view/query/steps/medical-record.vue'
import ReportListing from '../view/query/steps/report-listing.vue'
import ReportJianYan from '../view/query/steps/reprot_jian_yan.vue'
export default {
name: 'qie-huan-medol',
components: {
'z-nav-card-grid': NavCardGrid,
},
data () {
return {
// 上面 ref 属性绑定的值
shuxing: 'getChongZhiInfo',
active: 1,
items: [
[{
id: 'recharge-record',
title: '充值记录',
desc: '查询住院相关信息',
icon: ' fa fa-fw fa-3x fa-hospital-o blue',
selected: true
}], [{
id: 'expense-calendar',
title: '消费记录',
desc: '查询门诊相关信息',
icon: 'fa fa-fw fa-3x fa-cc-paypal gray'
}], [{
id: 'medical-record',
title: '就诊记录',
desc: '查询门诊相关信息',
icon: 'fa fa-fw fa-3x fa-stethoscope green'
}], [{
id: 'report-listing',
title: '检查报告',
desc: '查询门诊检查报告',
icon: 'fa fa-fw fa-3x fa-wpforms yellow'
}], [{
id: 'report-jian-yan',
title: '检验报告',
desc: '查询门诊检验报告',
icon: 'fa fa-fw fa-3x fa-file-text-o red'
}]
],
filters: { // 饿了吗 UI 时间选择器绑定的值
column: {
create_start_date: '',
create_end_date: ''
},
},
pickerBeginDateBefore: { // 限制选取时间范围的函数
disabledDate: (time) => {
// log.info('disabledDate---------------time',time)
let beginDateVal = this.filters.column.create_end_date;
if (!beginDateVal) {
return time.getTime() > Date.now();
}
return time.getTime() > beginDateVal || time.getTime() > Date.now();
}
},
pickerBeginDateAfter: { // 限制选取时间范围的函数
disabledDate: (time) => {
let beginDateVal = this.filters.column.create_start_date;
if (!beginDateVal) {
return time.getTime() > Date.now(); // 这一句是禁止选择超过当天的日期
}
// 这个是禁止小于开始日期 并且不能 超过当天日期
return time.getTime() < beginDateVal || time.getTime() > Date.now() ;
}
},
// 子组件集合
steps: [{ // 充值记录
id: 'z-recharge-record',
component: RechargeRecord
}, { // 消费记录
id: 'z-expense-calendar',
component: ExpenseCalendar
}, { // 就诊记录
id: 'z-verify-id-card',
component: MedicalRecord
}, { // 检查
id: 'z-report-listing',
component: ReportListing
}, { // 检验报告
id: 'z-report-jian-yan',
component: ReportJianYan
}]
}
},
props: {
uName: {
type: String,
default: ''
},
uCardno: {
type: String,
default: ''
},
uBalance: {
type: String,
default: ''
}
},
computed: {
// 获取当前步
currentStep () {
return this.steps[this.active - 1]
},
// 当前的事件源
currentView () {
return this.currentStep.component
},
},
methods: {
tapped (opt) {
log.info('opt',opt)
switch (opt.id) {
case 'recharge-record':
this.active = 1
this.shuxing = 'getChongZhiInfo' // 给 ref 属性绑定的值 重新赋值
break
case 'expense-calendar':
this.active = 2
this.shuxing = 'getxinfeiInfo'
break
case 'medical-record':
this.active = 3
break
case 'report-listing':
this.active = 4
break
default:
this.active = 5
}
},
GoBack () { // 点击返回上一级
log.info('返回上一级')
this.$router.go(-1)
// this.$router.go(n) ()
},
starDate (val) { // 这个是 时间选择器 绑定的change 事件处理函数
log.info ('filters.column.create_start_date-----------',val)
store.set('__startDate__', val)
switch (this.shuxing) {
case 'getChongZhiInfo':
log.info('000')
this.$refs.getChongZhiInfo.getChongInfo() // 父组件通过标记好的属性控制子组件定义好的事件
break;
case 'getxinfeiInfo':
log.info('11111')
this.$refs.getxinfeiInfo.getXiaoFeiInfo()
break;
default:
break;
}
},
endDate (val) {
log.info('filters.column.create_end_date',this.filters.column.create_end_date)
store.set('__endtDate__', val)
switch (this.shuxing) {
case 'getChongZhiInfo':
// this.$refs.getChongZhiInfo.getChongInfo()
break;
case 'getxinfeiInfo':
// this.$refs.getxinfeiInfo.getXiaoFeiInfo()
break
default:
break;
}
},
}
}
</script>
<style scoped >
.qie_huan_medol {
padding: 2rem;
overflow: hidden;
height: 100%;
}
.header {
display: flex;
line-height: 40px;
}
.header div {
margin-left: 1rem;
font-size: 24px;
}
/* .main {
overflow: hidden;
} */
.main .left {
float: left;
width: 18%;
}
.main .right {
float: left;
width: 80%;
background-color: #fff;
height: 74vh;
border-radius: .75rem;
margin-left: 2%;
margin-top: 10px;
}
</style>
<style lang="scss">
.qie_huan_medol .main .left .wrap{
padding: 0;
&:first-child {
margin-left: 0rem ;
}
&:last-child {
margin-right: 0rem ;
}
}
.qie_huan_medol .main .left .wrap .option {
padding: 10px 40px;
margin: 10px auto;
background-color: #fff;
}
.qie_huan_medol .main .left .wrap .option i {
margin-left: 0;
width: 3vw;
}
.qie_huan_medol .option .text .title {
font-size: 25px;
}
.qie_huan_medol .option .text .desc {
font-size: 17px;
}
.qie_huan_medol .option .text {
margin-left: 5px;
}
.qie_huan_medol .el-input--prefix .el-input__inner {
font-size: 20px!important;
}
.el-date-picker table {
font-size: 20px!important;
}
.el-table {
font-size: 20px;
}
.BtnStyle {
position: absolute;
bottom: 6rem;
left: 0;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
height: 3rem;
width: 8rem;
cursor: pointer;
text-align:center;
font-size: 1.2rem;
background-color: #fd7995;
color: #fff;
padding: 0;
border: none;
}
</style>
子组件:
<!-- ---------------------
-- 充值记录-门诊
--
-- --------------------- -->
<template>
<div class="childrenMedol">
<el-table
:data="tableData"
stripe
height="715px"
header-align="center"
style="width: 100%">
<el-table-column
prop="Czsj"
label="充值时间"
width="300">
</el-table-column>
<el-table-column
prop="Zffs"
label="充值方式"
width="300">
</el-table-column>
<el-table-column
prop="Czje"
label="充值金额"
width="300">
</el-table-column>
<el-table-column
prop="Czkh"
label="充值卡号">
</el-table-column>
<el-table-column
prop="Yhkh"
label="第三方账户">
</el-table-column>
</el-table>
<!-- <span @click="shiyan">666666666666</span> -->
</div>
</template>
<script>
import * as log from 'loglevel'
import vEvents from '../../../utils/v_events'
import axios from "axios";
import properties from "../../../properties";
import store from "store";
export default {
name: 'recharge-record',
data () {
return {
// date: {
// startTime: store.get('__startDate__'),
// endTime: store.get('__endtDate__')
// },
tableData: []
}
},
// computed: {
// returnVal () {
// const startTime = this.date.startTime
// return startTime
// // const endTime = store.get('__endtDate__')
// },
// returnValend () {
// // const startTime = store.get('__startDate__')
// const endTime = this.date.endTime
// return endTime
// },
// },
// watch: {
// returnVal (newVal,oldVal) {
// log.info('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb')
// },
// returnValend (newVal,oldVal) {
// // this.getChongInfo ()
// log.info('ddddddddddddddddddddddddddddddddddddd')
// },
// },
created () {
// this.getChongInfo (this.date.startTime,this.date.endTime)
this.getChongInfo ()
},
methods: {
// 门诊充值记录
getChongInfo () { // 这个就是子组件定义好的事件, 在上面父组件调用的就是这个
const hospitalId = store.get('__hospitalId__')
const areaId = store.get('__areaId__')
const startTime = store.get('__startDate__')
const endTime = store.get('__endtDate__')
const operatorNo = store.get('__operatorNo__')
const patientId = store.get('__patientId__')
const cardNo = store.get('__cardNo__')
log.info('startTime',startTime)
log.info('endTime',endTime)
if (!startTime || !endTime ) {
return this.$message({
message: '请选择您要查询信息的时间段',
type: 'warning'
});
} else {
// 查询门诊充值记录
axios.post( properties.api_url+"/his/proxy", {
"tranCode": "7007",
"hospitalId": hospitalId,
"areaId": areaId,
"cardNo": cardNo,
"patientId": patientId,
"operatorNo": operatorNo,
"startTime": startTime,
"endTime": endTime
})
.then(resp => {
log.info(resp.data,'获取门诊充值记录接口数据-接口7007')
// log.info(this.chongZhiInfo.length,'获取门诊充值记录接口数据-接口7007_length')
if (resp.data.list.length === 0){
this.tableData = resp.data.list
return this.$message.error('没有查询到你要查询的信息');
// this.$toast("没有查询到你要查询的信息");
// var that = this
// setTimeout(function() {
// that.$router.go(-1)
// },1000)
} else {
this.tableData = resp.data.list
log.info('tableData8888888888888888888888888888888888888',this.tableData)
}
});
}
},
// shiyan () {
// this.getChongInfo()
// }
},
watch: {
}
}
</script>
<style scoped>
.childrenMedol {
/* height: 100%; */
font-size: 17px;
color: black;
text-align: left;
padding: 1rem;
box-sizing: border-box;
}
</style>