vue子组件的自定义事件

Posted 2020-10-23 张啊咩

父子组件的信息传递无碍就是父组件给子组件传值（props和$attrs）和父组件触发子组件的事件（$emit）

之前已经谈过了父组件给子组件传值了，现在来说说父组件触发子组件的自定义事件吧～～

实际上挺简单：

父组件：

<template>
    <div>
        <my-child abcClick="sayHello"></my-child>
    </div>
</template>

<script>
export default {
    method: {
        sayHello(Num,Str) {
            alert(\'hello world~~\' + Num + Str)
        }
    }
}
</script>

子组件：

<template>
    <div>
        <!--例如最简单的封装一个按钮-->
        <button @click="childClick"></button>
    </div>
</template>

<script>
export default {
    data: {
        return{
            myNum: 456,
            myStr: \'haha\'
        }
    },
    method: {
        childClick() {
            this.$emit(\'abcClick\', this.myNum, this.myStr)
        }
    }
}
</script>

核心就是通过$emit来触发自定义事件（不需要注册），并且传值出去