Question

我有一个简短的问题：基于以下代码，为什么必须两次“导入”下面的组件才能使代码正常工作？

我正在一个非常封闭的环境中工作，因此目前无法使用Webpack或.vue SFC或npm（出于所有目的）。

我使用打字稿文件将一个小型Vue应用程序的工作版本拼凑在一起，但感到困惑，为什么它起作用：S。

我必须导入组件文件，然后然后将其作为组件。如果可能的话，我想清理一下，因为我们将对此进行滚动作为POC与也只是学习Vue的开发人员一起，所以我想一开始就避免不良做法。

index.ts

import * as Vue from "vue";
import * as Apple from "./App";                  <-----  
Vue.component('apple2', Apple.default);          <-----  wat?

let v = new Vue({
el: "#app",
components: { Apple},                            <-----
template: `
<div>
    <apple2/>                                    <-----
</div>`,
data: {
    name: "World"
},

});

App.ts

import * as  Vue from "vue";
import * as fred from  "./Hello";                    <----
Vue.component('fred2', fred.default);                <----

export default Vue.extend({
name: 'Apple',
template: `
<div>
    <fred2 :name="name" :initialEnthusiasm="4"/>     <-----
</div>`,
data() {
    return { name: "World" }
},
components: { fred }                                 <-----
});

Index.html

<!doctype html>
<html>
<head>
  <script src="scripts/vue.min.js"></script>
  <script data-main="scripts/build/index" src="scripts/lib/require.min.js"> 
  </script></head>
   <body>
     <div id="app"></div>
   </body>

tsConfig

{"compileOnSave": true,
"compilerOptions": {
"module": "amd",
"moduleResolution": "node",
"noImplicitAny": true,
"noEmitOnError": false,
"outDir": "./scripts/build",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"exclude": [
"node_modules",
"wwwroot"
],
"include": [
"./scripts/**/*"
]

}

Answer 1

执行此操作时，您会混淆两个不同的概念：

Vue.component('apple2', Apple.default);

您实际上是在全局Vue实例中注册名称为apple2的组件定义对象（Apple.default），从而使该组件定义对象可用于先前引用的Vue实例呈现的所有组件。在这种情况下，您可以在index.ts中删除这部分代码：

components: { Apple}

从理论上讲，您的应用仍然应该可以运行。

但是，因为您使用的是打字稿，所以可以使您的应用程序像使用模块系统一样工作，从而可以在每个父组件中导入使用的子组件，从而可以执行以下操作：

App.ts

export default const component = {
    template: '<div>My component</div>'
}

index.ts

import Vue from 'vue';
import component from './App';

new Vue({
    el: '#app',
    components: {
        'my-imported-component': component
    }
});

在您的模板中：

<div id="app">
    <my-imported-component/>
</div>

在我看来，这将是一种更好的方法，因为您不会污染所有组件的全局Vue实例，但这是一个问题，取决于您的方案。

有关更多信息，请查看以下链接：
https://vuejs.org/v2/guide/components-registration.html

必须要求Vue组件TWICE

1 个答案: