$emit、$refs 、 $on 的使用场景 vue 组件传值 element-UI 时间选择器

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>