7.3.1自定义事件

作者: 咸鱼前端 | 来源:发表于2019-03-03 09:23 被阅读0次

7.3.1自定义事件
自定义事件js
jQuery例子记录（持续更新）
JavaScript之事件完整篇
springboot之事件监听
this.$emit()
JS中的事件
vs2017开发ActiveX(主讲OCX)(六)、添加自定义事
jquery怎样绑定事件及事件函数
jquery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.3.1自定义事件</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p>总数： {{total}}</p>
        <my-component @increase='getTotal' @reduce='getTotal'></my-component>
    </div>
    <script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        //子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件
        //父组件可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，如下
        Vue.component("my-component",{
            template: `
            <div>
                <button @click="increase">+1</button>
                <button @click="reduce">-1</button>
            </div>
            `,//两个按钮分别绑定了点击事件
            data () {
                return {
                    counter: 0,
                }//定义 "counter"
            },
            methods: {
                increase: function () {
                    this.counter++;// "counter" 自增1
                    this.$emit("increase",this.counter);//将自增1之后的 "counter" 通过自定义的 "increase" 的事件传递给父组件
                },
                reduce: function () {
                    this.counter--;//counter自减1
                    this.$emit("reduce",this.counter);//将自减1之后的 "counter" 通过自定义的 "reduce" 的事件传递给父组件
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                getTotal: function(value){//上面的点击事件，通过$emit()传递过来的数值是 "this.counter" ，这里用value接收，之后赋值给 "total" ，在根元素上渲染出来
                    this.total = value;
                }
            }
        })
    </script>
</body>
</html>