vue组件的简单使用

1.编写模板

//传递对象参数
<div v-for="item in registrations">
   <div>序号：{{item.number}}</div> 
</div>

//传递事件
<div class="rbtn" style="border-right:none;" v-on:click="$emit('edit-click', item.id)">修改</div>

2.使用props将父组件的数据传递过来

props: ['registrations'],

3.父组件引入子组件

import registrationGroup from 'components/registrationGroup'

4.注册组件

components: {
      registrationGroup
}

5.在页面上引用以及绑定参数和事件

使用@edit-click来绑定事件，'edit-click'与第一步的"$emit('edit-click', item.id)"的第一个参数相同，第二个参数为事件传递出去的参数，这里传递id，父类只需要定义handelRigistrationEdit(id)方法就可以在方法中获取id

<div class="registrationGroup">
        <registrationGroup :registrations="registrations" @edit-click="handelRigistrationEdit"></registrationGroup>  
</div>   

组件完整代码： registrationGroup.vue

<template>
  <div class="wrap">
    <div v-for="item in registrations">
      <div class="registration-item">
        <div class="registration-info">
          <div class="name"><b>{{item.name}}（男{{item.age}}岁）</b></div>
          <div>序号：{{item.number}}</div>
          <div>接诊类型：{{item.type}}</div>
          <div>接诊医生：{{item.doctor_name}}</div>
         <!--  <div>就诊诊室：{{item.room}}</div> -->
          <div>登记时间：{{item.created_at | formatDate}}</div>
          <div v-bind:class="['status',statusClassArr[item.status]]">{{getStatusName(item.status)}}</div>
        </div>
        <div class="rbtn-group">
            <div class="rbtn" style="border-right:none;" v-on:click="$emit('edit-click', item.id)">修改</div>
            <div class="rbtn" style="border-left:1px solid #fff;">打印小票</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import utils from 'utils/common.js'

export default {
  data(){
    return {
        statusClassArr:["prepare","active","finish"]
    }
  },
  created (){

  },
  filters:{
    formatDate(time){
        return utils.formatDate(new Date(time),"yyyy-MM-dd")
    }
  },
  methods: {
      getStatusName(status){
          let names = ['未接诊','接诊中','接诊结束'];
          return names[status];
      }
  },
  props: ['registrations'],

}
</script>