Vue2のv-bindが子インスタンスで正常に動作していませんか？

Question

私はVueの子インスタンスを持ち、v-bindは親インスタンスでのみ動作しますが、子インスタンスでは動作しません。私は私の問題を説明するためのサンプルファイルを出しました。

何か不足していますか？

これは私のコードです：

var app2 = new Vue({ 
 
    el: '#app2', 
 
    data: { 
 
    isSpinning2: true 
 
    }, 
 
    methods: { 
 
    stop2: function() { 
 
     app2.isSpinning2 = false; 
 
    } 
 
    } 
 
}); 
 

 
var app1 = new Vue({ 
 
    el: '#app1', 
 
    data: { 
 
    isSpinning: true 
 
    }, 
 
    methods: { 
 
    stop1: function() { 
 
     app1.isSpinning = false; 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div id="app1"> 
 
    <i v-bind:class="{'fa-spin': isSpinning}" class="fa fa-address-book"></i> 
 
    <button v-on:click="stop1">Stop 1</button> 
 
    <div id="app2"> 
 
    <i v-bind:class="{'fa-spin': isSpinning2}" class="fa fa-address-book"></i> 
 
    <button v-bind:onclick="stop2">Stop 2</button> 
 
    </div> 
 

 
</div>

Answer 1

これは、コンポーネントがあるため、正確に何です。あなたのスピナーボタンをカプセル化するコンポーネントがあります。

console.clear() 
 

 
Vue.component("spinner",{ 
 
    template: ` 
 
    <div> 
 
     <i v-bind:class="{'fa-spin': isSpinning}" class="fa fa-address-book"></i> 
 
     <button v-on:click="stop"><slot /></button> 
 
    </div> 
 
    `, 
 
    data(){ 
 
    return { 
 
    isSpinning: true 
 
    } 
 
    }, 
 
    methods: { 
 
    stop: function() { 
 
     this.isSpinning = false; 
 
    } 
 
    } 
 
}) 
 

 

 
var app1 = new Vue({ 
 
    el: '#app1', 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div id="app1"> 
 
    <spinner>Stop 1</spinner> 
 
    <spinner>Stop 2</spinner> 
 
</div>