javascript - 在 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 编译器可以解析的是组件选项对象中提供的模板。因此，如果您提供 template componentConfig 中的选项反对您的示例将起作用。否则，您将不得不通过 Webpack 和 Vue Loader 的预编译步骤来解析单个文件组件的模板。为此，您必须符合 SFC 结构 defined in the spec .这是摘录..

Template

• Each *.vue file can contain at most one <template> block at a time.
• Contents will be extracted and passed on to vue-template-compiler and pre-compiled into JavaScript render functions, and finally injected into the exported component in the <script> section.

Script

• Each *.vue file can contain at most one block at a time.
• The script is executed as an ES Module.
• The default export should be a Vue.js component options object. Exporting an extended constructor created by Vue.extend() is also supported, but a plain object is preferred.
• Any webpack rules that match against .js files (or the extension specified by the lang attribute) will be applied to contents in the <script> block as well.

---

为了让你的具体例子工作你可以重写main.js像这样的文件..

const MyComponent = require("./MyComponent.vue");

const el = ".container";
const data = {
  name: "Jess"
};

MyComponent.create(el, data);

还有你的MyComponent.vue文件(这也可能是一个 js 文件，正如下面提到的@Ferrybig)..

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

function create(el, data) {
  const componentConfig = {
    el,
    name: "my-component",
    data,
    template: `<div>Hello {{ name }}!</div>`
  };
  const vm = new Vue(componentConfig);
  return vm;
}

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

查看此 CodeSandbox

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

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

function create(el, data) {
  const componentConfig = {
    el,
    name: "my-component",
    data,
    render(h) { return h('div', 'Hello ' + data.name) } 
  };
  const vm = new Vue(componentConfig);
  return vm;
}

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

CodeSandbox

---

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