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

Question

我有这个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'
   }
});

问题是 children 的数据没有绑定到 html。我可以在另一个实例中包含一个实例，例如 angular?

fiddle 示例： 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'
   }
});

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

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

How set a instance of Vue inside other

javascript

vue.js