Должен требовать Vue компонент ДВАЖДЫ - PullRequest
Новая
       13

Должен требовать Vue компонент ДВАЖДЫ

0 голосов
/ 26 февраля 2019

Короткий вопрос, который у меня есть: основываясь на приведенном ниже коде, , почему я должен 'импортировать' компоненты ниже, чтобы мой код заработал дважды ?

Я работаю вдовольно замкнутая среда, поэтому в данный момент нельзя использовать SFC Webpack или .vue или 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"
},

});

Приложение.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/**/*"
]

}

1 Ответ

0 голосов
/ 27 февраля 2019

Когда вы делаете это, вы смешиваете две разные концепции: 

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

На самом деле вы регистрируете объект определения компонента (Apple.default) с именем apple2 в глобальном экземпляре Vue,сделать его доступным для всех компонентов, которые отображаются ранее упомянутым экземпляром 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

...