vue中v-on绑定自定事件

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

对官网实例进行了一些修改,如下图:


<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: '',
        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>

vue中v-on绑定自定事件_第1张图片

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

你可能感兴趣的:(vue.js)