vue父子传参方式——自定义事件

自定义事件

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

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

基础语法

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 = current
            this.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>

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

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