如何在其他内部设置 Vue 实例答案

【问题标题】：How set a instance of Vue inside other如何在其他内部设置 Vue 实例
【发布时间】：2016-02-12 15:08:20
【问题描述】：

我有这个 html：

<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上。我可以在另一个实例中包含一个实例，例如 angular？

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

考虑到 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'
   }
});

*注意：为了更好理解而更改了变量名称

【讨论】：

【解决方案2】：

您使用的是过时版本的 Vue。这是使用最新版本的相同代码：https://jsfiddle.net/racbns2x/

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

【讨论】：