在Vue.js中，v-on是不是写错了？

Question

我想制作两个输入数字的按钮。

但是当左边的到10时，它看起来是这样的： enter image description here

我希望左边是2，右边是0。

所以我更改了我的代码：

<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal2"></button-counter>
<button-counter v-on:increment2="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
    template: '<button v-on:click="increment">{{ counter }}</button><button v-on:click="increment2">{{ counter }}</button>',
    data: function () {
        return {
            counter: 0
        }
    },
    methods: {
        increment: function () {
            this.counter += 1
            this.$emit('increment')
        },
        increment2:function () {
            if(this.counter === 10){
                this.counter = 0;
                this.increment();
            }
            this.$emit('increment2')
        }
    },
})
new Vue({
    el: '#counter-event-example',
    data: {
        total: 0
    },
    methods: {
        incrementTotal: function () {
            this.total += 1
        },
        incrementTotal2: function () {
            this.total  = this.total +10
        }

    }
})

但是没用..enter image description here

我点右键，总数不会变。

Answer 1

您渲染 2 个组件，每个组件应该渲染 2 个按钮。听起来对吗？如果你检查 Element Inspector，你会看到只渲染了 2 个按钮。 2 + 2 === 2 - 有点可疑...

Vue 的开发版本在控制台告诉你 "Error compiling template... Component template should contain exactly one root element"。

所以每个按钮计数器呈现 第一个 按钮 => 给你写警告 => 并忽略第二个按钮。

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter-1 @increment="incrementTotal"></button-counter-1>
  <button-counter-2 @increment="incrementTotal"></button-counter-2>
</div>

Vue.component('button-counter-1', {
    template: '<button @click="increment1">{{ counter }}</button>',
    data: function() {
        return { counter: 0 }
    },
    methods: {
        increment1: function () {
            this.counter++;
            this.$emit('increment', 10);
        }
    }
});
Vue.component('button-counter-2', {
    template: '<button @click="increment2">{{ counter }}</button>',
    data: function() {
        return { counter: 0 }
    },
    methods: {
        increment2: function () {
            this.counter++;
            this.$emit('increment', 1);
        }
    }
})
new Vue({
    el: '#counter-event-example',
    data: {
        total: 0
    },
    methods: {
        incrementTotal: function (n) {
            this.total += n;
        },
    }
})

在Vue.js中，v-on是不是写错了？

In Vue.js, is this a wrong writing for v-on?

javascript

vue.js

vue-component