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警告]：未知的自定义元素：-您是否已注册   组件正确吗？对于递归组件，请确保   提供“名称”选项。

（位于）

您对如何正确设置方案有任何想法/经验吗？

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

谢谢你，马里奥

Answer 1

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

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

1 个答案: