多个 Vue 实例绑定到父元素和子元素

Question

当我不想使用 SPA 时，我想询问 Vue 实例（组件）的最佳设置。

我的HTML看起来像：

<html>
  <div id="layout">
    <div>Some Layout based content...</div>
    <div id="homepage">
      <simple-form-component></simple-form-component>
    </div>
  </div>
  <script type=text/javascript src="homepage.js"></script>
  <script type=text/javascript src="layout.js"></script>
</html>

目前我有两个 .js 文件的简单示例：

layout.js
homepage.js

// layout.js

import Vue from 'vue/dist/vue.js'
new Vue({
    el: '#layout',
});

// homepage.js

import Vue from 'vue/dist/vue.js';
import SimpleForm from '../../../../components/SimpleForm.vue';

new Vue({
    el: '#homepage',
    components: {
        SimpleForm,
    },
});

它似乎工作正常，但我怀疑这不是 100% 正确，因为控制台错误：

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in )

你有任何ideas/experience如何正确设置我的场景吗？

PS: 我想把我的JS拆分成不同的文件，由webpack管理，由后端分发。

谢谢，马里奥

Answer 1

我找到了解决方法 v-pre，我的 HTML 将更改行：<div id="homepage" v-pre>。一个小问题是，我不会在 Vue Devtools.

中看到我的组件

多个 Vue 实例绑定到父元素和子元素

Multiple Vue instances bind to parent & child elements

javascript

instance

webpack

vue.js