- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
有没有办法让 .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 编译器如何能够神奇地推断出(从脚本标签内)我想要引用上面声明的模板......所以......是的。是否有关于为什么我不能这样做的解释,或者关于如何让它工作的想法?
最佳答案
您所描述的是通过 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 atime.- Contents will be extracted and passed on to
vue-template-compiler
andpre-compiled into JavaScript render functions, and finally injectedinto 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 alsosupported, but a plain object is preferred.- Any webpack rules that match against
.js
files (or the extensionspecified by thelang
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>
最后要记住的一件事:在任何组件中,您都可以使用模板或渲染函数,但不能像示例中那样同时使用两者。这是因为其中一个会覆盖另一个。例如,请参阅 JSFiddle Vue boilerplate并注意如何 when you add a render function模板被覆盖。这可以解释您遇到的错误。 render 函数优先,但您为它提供了一个组件的选项对象,该对象不提供要呈现的模板。
关于javascript - 在 Vue 文件中创建根 Vue 实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52882583/
有没有一种方法可以使用标准类型构造函数(例如 int、set、dict、list、tuple 等)以用户定义的方式将用户定义类的实例强制转换为其中一种类型?例如 class Example:
我知道这个问题在Stackoverflow中有很多问题,但是即使有很多答案,这些答案也帮不了我什么,也没有找到答案。 在我的WebAPP中,它可以正常工作,但是当我将其转换为API时,它失败了(主题标
这个问题已经有答案了: Why does the ternary operator unexpectedly cast integers? (3 个回答) 已关闭 9 年前。 最近遇到一个Java的陷
我尝试使用 FirebaseApp.configure() 配置 Firebase,但遇到以下崩溃: *** Terminating app due to uncaught exception 'c
我有一个自连接员工实体类,其中包含与其自身相关的 id、name 和 ref 列。我想创建它的新实例并将其保存到数据库。 首先我创建了一个 Employee 类的实例并将其命名为 manager。然后
我有一个用于添加新公寓的表单,在该表单中我有一个下拉列表,用户可以在其中选择负责的人员。 显然,当您从下拉列表中选择并尝试保存公寓时,我的应用程序认为该人已被修改。它给了我下面的错误,指示我应该首先保
从 Visualforce 页面,我需要检索我们组织的 salesforce 实例的 URL,而不是 Visual Force URL。 例如我需要https://cs1.salesforce.com
我遇到了一些可能的问题答案,但这是关于从 Hibernate 3.4.0GA 升级到 Hibernate 4.1.8 的问题。所以这曾经在以前的版本下工作,我已经四处搜索了为什么它在这个新版本中出现了
似乎一遍又一遍地问这个问题,我仍然找不到解决我问题的答案。我在下面有一个域模型。每个新创建或更新的“安全用户”都需要我确保其具有配置文件,如果没有,则创建一个新的配置文件并分配给它。 配置文件的要求相
我很难调试为什么 JPA 不级联我的 @ManyToMany 关系。我发现的所有答案都与缺少级联语句有关。但我确实拥有它们并且仍然得到: Caused by: org.hibernate.Transi
Play 服务 API 表明有一个叫做 Instance ID 的东西 但是,在 Android Studio 中包含以下内容后,我无法导入 InstanceID 类 compile "com.goo
我正在使用 Seam 框架。我有 2 个实体: 请求.java @Entity @Table(name = "SRV_REQUEST") public class Request { private
This question处理构建一个适当的Monad来自单子(monad)的实例,但仅在某些约束下 - 例如Set .诀窍是将其包装成 ContT ,它将约束推迟到包装/展开其值。 现在我想对 Ap
我正在尝试执行此查询: StringBuffer sb = new StringBuffer(); sb.append("select p from PointsEntity p " + "where
我试图了解是否可以更改我的 hibernate 配置并使用单个 MySQL 实例(而不是我当前拥有的多个 MySQL 实例): 我有一个使用 hibernate 的 Java 应用程序,与 2 个模式
我有一个选项卡滑动布局,其中包括四个选项卡,每个选项卡都有自己的布局和 fragment ,在我的主要 Activity 布局中,viewpager 参与更改选项卡。特定 View (选项卡)在应用程
我看到很多帖子声称他们正在运行 MySql 的 RDS 实例,但无法连接到该实例,但我没有运行 RDS。 我使用 EC2 实例来托管我的 WordPress 博客,该博客是使用 Web 平台安装程序安
因为我在我的 ec-2 实例上的 python 虚拟环境中运行应用程序( Airflow ),并且我想在同一个 ec2 实例上的默认 python 环境中运行命令,所以我认为 ssh 到我自己的实例更
这个问题已经有答案了: How to fix the Hibernate "object references an unsaved transient instance - save the tra
例子: run APP1 .. ... run APP1 ... run APP2 如何在 APP2 中对 Vue 说我需要调用 APP1?
我是一名优秀的程序员,十分优秀!