如何封装一个组件
封装组件要向外面冒出方法,以供调用
例如 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) },