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の警告]：プロパティまたはメソッド「NEXTPAGEは」 インスタンスで定義されていないが、レンダリング中に参照されます。データオプションでは、反応性のある データプロパティを宣言してください。

私はjavascriptにあまり慣れていないので、単にエラーを理解できません。どういうわけかdataの値をコンポーネントに「リンク」させなければならないと思いますか？

Answer 1

コンポーネントは以下のように呼び出す必要があります。

<counter-button></counter-button> 

これで警告が修正され、ボタンが表示されます。しかし、あなたのカウンターは変わらないでしょう（あなたが少なくともそれを期待している方法ではない）。今ボタンがスタンドアロンコンポーネントであり、それは親コンポーネントのカウンタを知っていないため、

理由です。

コンポーネントに関するVueJsの公式ドキュメントをご覧になることをお勧めします。これらのコンポーネントには、counterという素晴らしい例があります。

サイドノート：あなたが唯一のカウンターを高めるために、複数のコンポーネントに一つのボタンを再利用したい場合は

あなたはeventsを実装するかVuexを使用する必要があります。しかし、これは少し先進的な話題であり、最初に基礎を述べるべきです。