Vue实例内部的Vue实例

大家好！

我在这里获得此HTML代码：

// index.html
<div data-init="component-one">
  <...>

 <div data-init="component-two">
   <button @click="doSomething($event)">
 </div>
</div>

如果我正确理解所有内容，这基本上是在另一个Vue实例中引用一个Vue实例。相应的JS代码分为两个文件，如下所示：

// componentOne.js
new Vue(
  el: '[data-init="component-one"]',
  data: {...},
  methods: {...}
);


// componentTwo.js
new Vue(
  el: '[data-init="component-two"]'
  data: {...}
  methods: {
    doSomething: function(event) {...}
  }
);

现在，这个问题是，doSomething从componentTwo不会被调用。

但是当我做一些内联的东西（如）时{{ 3 + 3 }}，它会像应该的那样进行计算。所以Vue知道有什么。并且它还会删除@click页面加载时的元素。

I tried fiddling around with inline-template as well, but it doesn't really work as I'd expect it to in this situation. And I figured it isn't meant for this case anyway, so I dropped it again.

What would the correct approach be here? And how can I make this work the easiest way possible with how it's set up right now?

The Vue version we use is 2.1.8.

Cheers!