在Vue文件中创建根Vue实例

Question

有没有办法让.vue文件负责在单个文件组件模式中创建自己的Vue实例？

这是Vue文件.

// MyComponent.vue
<template><div>Hello {{ name }}!</div></template>

<script>
const Vue = require('vue');

// what would usually be exports default
const componentConfig = {
    name: "my-component",
    props: {
        name: String,
    },
};

function create(el, props) {
    const vm = new Vue({
        el,
        render(h) {
            return h(componentConfig, { props });
        });
    vm.$mount();
    return vm;
}

module.exports = { create };
</script>

然后在一些JS文件中使用:

// index.js
const MyComponent = require('./MyComponent.vue');

const el = '.container';
const props = {
    name: 'Jess',
};

MyComponent.create(el, props);
</script>

---

当我执行上述操作时,我收到有关无法找到模板的错误.

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <MyComponent>
       <Root>

就像我本能地说,我不明白Vue编译器如何能够神奇地推断(从脚本标签内)我想引用上面声明的模板......所以..是的.有没有解释为什么我不能这样做,或者想我怎么能让它工作？

Answer 1

您所描述的内容是通过 Webpack 和Vue Loader在预编译步骤中完成的。Vue 编译器实际上并不解析Single File Components。Vue 编译器可以解析的是 component\xe2\x80\x99s options 对象中提供的模板。因此，如果您在对象中提供一个template选项，componentConfig您的示例就会起作用。否则，您将必须使用 Webpack 和 Vue Loader 完成预编译步骤来解析单个文件组件的模板。为此，您必须符合规范中定义的SFC 结构SFC 结构。这是摘录..

\n

\n

模板

\n

\n

\n

\n
• 每个*.vue文件一次最多可以包含一个<template>块。\n
\n
• 内容将被提取并传递到vue-template-compiler并预编译到 JavaScript 渲染函数中，最后注入到该<script>部分中的导出组件中。
\n

\n

\n

\n

脚本

\n

\n

\n

\n
• 每个*.vue文件一次最多可以包含一个块。
\n
• 该脚本作为 ES 模块执行。
\n
• 默认导出应该是 Vue.js组件选项对象。\n还支持导出由 创建的扩展构造函数Vue.extend()，但首选普通对象。
\n
• .js任何与文件（或属性指定的扩展名）匹配的 webpack 规则也lang将应用于块中的内容<script>。
\n

\n

\n\n

main.js为了使您的特定示例正常工作，您可以像这样重写文件..

\n

const MyComponent = require("./MyComponent.vue");\n\nconst el = ".container";\nconst data = {\n  name: "Jess"\n};\n\nMyComponent.create(el, data);\n

\n

还有你的MyComponent.vue文件（这也可以是js下面提到的@Ferrybig 的文件）..

\n

<script>\nconst Vue = require(\'vue\');\n\nfunction create(el, data) {\n  const componentConfig = {\n    el,\n    name: "my-component",\n    data,\n    template: `<div>Hello {{ name }}!</div>`\n  };\n  const vm = new Vue(componentConfig);\n  return vm;\n}\n\nmodule.exports = { create };\n</script>\n

\n

请参阅此代码沙盒

\n

或者，如果您更喜欢渲染函数，您MyComponent.vue将看起来像这样..

\n

<script>\nconst Vue = require(\'vue\');\n\nfunction create(el, data) {\n  const componentConfig = {\n    el,\n    name: "my-component",\n    data,\n    render(h) { return h(\'div\', \'Hello \' + data.name) } \n  };\n  const vm = new Vue(componentConfig);\n  return vm;\n}\n\nmodule.exports = { create };\n</script>\n

\n

代码沙盒

\n\n

最后要记住的一件事是：在任何组件中，您都可以使用模板或渲染函数，但不能像示例中那样同时使用两者。这是因为其中一个会覆盖另一个。例如，请参阅JSFiddle Vue 样板并注意添加渲染函数时的情况模板如何被覆盖。这可以解释您遇到的错误。渲染函数优先，但您向它提供了一个组件的选项对象，该对象不提供要渲染的模板。

\n