vue中v-on绑定自定事件

来源：互联网发布：js获取数字前两位编辑：程序博客网时间：2024/06/06 07:08

关于官网vue中v-on绑定自定义事件的个人理解

对官网实例进行了一些修改，如下图：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>v-on绑定自定义事件</title>    <script src="vue.js"></script></head><body><div id="app">    <p>{{ total }}</p>    <button-counter v-on:increment="father1"></button-counter>    <button-counter v-on:incr="father2"></button-counter>    <button-counter v-on:inc="father1"></button-counter></div><script>    Vue.component('button-counter', {        template: '<button v-on:click="child">{{ counter }}</button>',        data: function () {            return {                counter: 0            }        },        methods: {            child:function(){                this.counter += 1;                this.$emit('increment');                this.$emit('incr');                this.$emit('inc');            }        }    });    new Vue({        el: '#app',        data: {            total: 0        },        methods: {            father1: function () {                this.total += 1            },            father2: function () {                this.total -= 1            }        }    })</script></body></html>

代码截图

点击第一个按钮浏览器的执行顺序如图：所示。
步骤一：点击第一个按钮，执行子组件的函数child
步骤二：分别触发该按钮中的事件$emit(‘ ’)；
步骤三：监听到 v-on:increment 事件，
步骤四：执行父组件监听子组件的事件father1；

阅读全文

0 0