如何設置Vue公司的實例內其他

Question

我有這個網站：

<div id='parent'> 
    {{title}} 
    <div id='children'> 
     {{titleChildren}} 
    </div> 
</div> 

這兩個Vue的實例：

var parent = new Vue({ 
    el: "#parent", 
    data: { 
     title: 'Test Parent' 
    } 
}); 

var parent = new Vue({ 
    el: "#children", 
    data: { 
     titleChildren: 'Test Children' 
    } 
}); 

的問題是孩子的數據不上的HTML綁定。 我可以有其他的一個實例，像角？

小提琴例如： https://jsfiddle.net/dsxvce0w/

Answer 1

您使用Vue公司的過時的版本。下面是使用最新版本的同一代碼：https://jsfiddle.net/racbns2x/

// Vue 1.0.7 
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js 

Answer 2

考慮Vue.js 2.0，你的代碼沒有工作，因爲你在錯誤的順序實例化。

按照正確的順序，孩子的數據將綁定在HTML上，只要你想。

順序錯誤：

var parent = new Vue({ 
    el: "#parent", 
    data: { 
     title: 'Test Parent' 
    } 
}); 

var children = new Vue({ 
    el: "#children", 
    data: { 
     titleChildren: 'Test Children' 
    } 
}); 

正確的順序：

var children = new Vue({ 
    el: "#children", 
    data: { 
     titleChildren: 'Test Children' 
    } 
}); 

var parent = new Vue({ 
    el: "#parent", 
    data: { 
     title: 'Test Parent' 
    } 
}); 

*注：變量名稱更改，以更好地理解