使用 vue.js 组件计算一个数据值

Use vue.js component to count up a data value

我正在使用 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 the instance but referenced during render. Make sure to declare reactive data properties in the data option.

因为我太不习惯javascript,所以我根本无法理解错误。我想我必须以某种方式 "link" 我的组件的 data 值?

你的组件应该像下面这样调用。

<counter-button></counter-button>

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

原因

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

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

旁注:

如果您希望在多个组件上重复使用一个按钮来仅增加一个计数器,您将必须实施 events or use Vuex。但是,这些主题有点高级,您应该先了解基础知识。