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

【问题标题】：Multiple Vue instances bind to parent & child elements多个 Vue 实例绑定到父子元素
【发布时间】：2019-04-02 08:12:14
【问题描述】：

当我不想使用 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
主页.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 警告]：未知的自定义元素：- 你注册了吗组件正确吗？对于递归组件，请确保提供“名称”选项。

（在中找到）

您对如何正确设置我的场景有任何想法/经验吗？

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

谢谢你，马里奥

【问题讨论】：

你可以只在homepage 上挂载 Vue，如果你不希望你的页面表现得像一个 SPA，你可以删除那个 div。
实际上是的，在这个简化的例子中，但想象一下我想在 layout 中添加一些组件（如 bootstrap-vue 组件）。

标签： javascript vue.js webpack instance

【解决方案1】：

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

【讨论】：