javascript - 使用vue.js组件统计数据值

Question

我正在使用 vue.js 并尝试重新创建 "Listening to Events"例子。他们使用以下代码:

HTML

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

JS

var example1 = new Vue({
  el: '#example-1',
    data: {
    counter: 0
  }
})

我想做同样的事情，但由于它是我会更频繁地做的事情，我想创建一个组件:

HTML

<div id="example-1">
  <counterButton></counterButton>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

JS

Vue.component('counterButton', {
  template: '<button v-on:click="counter += 1">Add 1</button>'
})

var example1 = new Vue({
  el: '#example-1',
    data: {
    counter: 0
  }
})

这似乎不起作用，但我收到以下警告:

[Vue warn]: Property or method "nextPage" is not defined on theinstance but referenced during render. Make sure to declare reactivedata properties in the data option.

由于我不太习惯 javascript，所以我根本无法理解该错误。我想我必须以某种方式将 data 值“链接”到我的组件？

Answer 1

您的组件应按如下方式调用。

<counter-button></counter-button>

这将修复警告并显示该按钮。但是，您的计数器不会改变(至少不是您期望的那样)。

原因

这是因为现在按钮是一个独立的组件，它不知道父组件的计数器。

我建议查看有关组件的 VueJs 官方文档，他们有一个很好的示例 counter .

旁注:

如果您希望在多个组件上重复使用一个按钮来仅增加一个计数器，则必须实现 events或使用Vuex 。然而，这些都是一些高级主题，您应该首先介绍基础知识。