使用vue.js組件計算數據值

Question

我正在使用vue.js，並嘗試重新創建“監聽事件”示例。 他們使用以下代碼：

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
  }
})

當我收到以下警告時，這似乎不起作用：

[警告]：屬性或方法“ nextPage”未在實例上定義，但在渲染期間被引用。 確保在data選項中聲明反應性數據屬性。

由於我不習慣使用JavaScript太多，因此我根本無法理解該錯誤。 我想我必須以某種方式將data值“鏈接”到我的組件上？

Answer 1

您的組件應按以下方式調用。

<counter-button></counter-button>

這將糾正警告，並且按鈕將出現。 但是，您的計數器不會改變（至少不會改變您的期望）。

原因

這是因為現在按鈕是一個獨立的組件，並且它不知道父組件的計數器。

我建議看一下有關組件的VueJs官方文檔，它們有一個很好的計數器示例。

旁注 ：

如果希望在多個組件上重用一個按鈕以僅增加一個計數器，則必須實現事件或使用Vuex 。 但是，這些是一些高級主題，您應該首先介紹基礎知識。