阿里巴巴b2b_哪些企业网站做得好_泉州seo优化_最有效的推广方式

自定义事件

自定义事件，指的就是父组件可以将自己的方法，作为一个“自定义事件”绑定在子组件身上，子组件中可以触发自定义事件。

简单来说，自定义事件最终达到的效果就是：子组件可以调用父组件的方法

基础语法

1、父组件绑定自定义事件

父组件将自己内部的方法，传递给子组件：

<template><div><common-page @change="handlePageChange"/></div>
</template><script>
import CommonPage from '@/components/common/CommonPage'
export default {components: {CommonPage,},// ...methods: {//分页、筛选变化时触发handlePageChange({ pageSize, current }) {this.pagination.current = currentthis.pagination.size = pageSize},}
};
</script>

2、子组件触发自定义事件

子组件调用父组件传递的方法：

<template><div class="pagination"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination></div>
</template><script>export default {name: 'common-page',// ...methods: {handleSizeChange (val) {this.$emit('change', { current: this.pagination.current, pageSize: val })},handleCurrentChange (val) {this.$emit('change', { pageSize: this.pagination.pageSize, current: val })},},}
</script>

如果子组件想要修改父组件的数据，就必须调用父组件的方法来实现。

数据在哪儿，就在哪儿修改数据