如何封装一个组件

封装组件要向外面冒出方法,以供调用

例如 tabs组件

//change 暴露出方法来
<template>
  <div class="iip-base-tab">
      <el-radio-group v-model="currentOption" @change="handlerChange" size="default" border="false">
        <el-radio-button v-for="(item,index) in options" :key="index" :label="item.value"> {{item.text}} </el-radio-button>
      </el-radio-group>
    </div>
</template>

//暴露给父组件
 handlerChange (value) {
      this.$emit('change', value)
    }

父组件触发自定义事件change

<base-tab :options="options" @change="handleChangeTabs"></base-tab>
//在这里传参数获取数据   
 handleChangeTabs (tab) {
      let currentStatus = tab
      let params = {
        'start': this.page.number + '',
        'size': this.page.size + '',
        'status': currentStatus
      }
      this.loadData(params)
    },

猜你喜欢

转载自www.cnblogs.com/joer717/p/10919194.html