码迷,mamicode.com
首页 > 其他好文 > 详细

vue子组件的自定义事件

时间:2018-02-05 12:44:42      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:att   alert   mit   line   blog   attr   blank   vue   under   

父子组件的信息传递无碍就是父组件给子组件传值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来触发自定义事件(不需要注册),并且传值出去

vue子组件的自定义事件

标签:att   alert   mit   line   blog   attr   blank   vue   under   

原文地址:https://www.cnblogs.com/amiezhang/p/8416530.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!