vue中自定义事件
最近封装组件,table组件封装完毕以后需要在父组件中引入,有一个需求,就是函数在父组件中定义,但是要在子组件中触发。举个例子,用el-table二次封装的组件,好多原生的函数element中都有定义,但是触发函数以后具体执行的事件需要在父组件中定义,有一个好办法,就用到了我们vue中的自定义事件。子组件原生事件:<div style="display: flex; justify-cont
·
最近封装组件,table组件封装完毕以后需要在父组件中引入,有一个需求,就是函数在父组件中定义,但是要在子组件中触发。举个例子,用el-table二次封装的组件,好多原生的函数element中都有定义,但是触发函数以后具体执行的事件需要在父组件中定义,有一个好办法,就用到了我们vue中的自定义事件。
子组件原生事件:
<div style="display: flex; justify-content: flex-end; align-item: center">
<el-pagination
style="margin-top: 10px; margin-right: 0"
layout="total, sizes, prev, pager, next, jumper"
:total="paginationData.total"
@current-change="changeCurrentOrPage"
@size-change="changeIndexOrPage"
:current-page.sync="paginationData.pageIndex"
:page-size.sync="paginationData.pageSize"
:page-sizes="[5, 10, 15, 20]"
>
</el-pagination>
</div>
//封装的分页组件
子组件触发事件:向父组件发送事件:
// 改变页码或者数量
changeIndexOrPage() {
this.$emit("changeIndexOrPage");
// console.log(this.$parent)
},
父组件接受事件:
<CetcTable
:ifHighlight="ifHighlight"
:tableData="tableData"
:tableColumn="tableColumn"
:paginationData="paginationData"
@changeIndexOrPage='changeIndexOrPage'
></CetcTable>
父组件定义事件:
changeIndexOrPage(){
console.log('123')
}
更多推荐
已为社区贡献1条内容
所有评论(0)