Vue.js에서는 컴포넌트를 Import한 후 내보낼 필요가 있는 이유는 무엇입니까?

Vue.js에서는 컴포넌트를 Import한 후 내보낼 필요가 있는 이유는 무엇입니까?

»PHP다른 파일의 코드를 포함하면 포함을 수행한 파일 내에서 코드를 사용할 수 있게 됩니다. 하...에서는...Vue.js컴포넌트를 Import한 후에는 컴포넌트도 내보내야 합니다.

왜? 그냥 수입하면 되지?

Vue.js컴포넌트를 Import한 후에는 컴포넌트도 내보내야 합니다.

것 같습니다.User.vue 그런지 UserDetail ★★★★★★★★★★★★★★★★★」UserEdit후 Import로 .components★★★★

import UserDetail from './UserDetail.vue';
import UserEdit from './UserEdit.vue';

export default {
  components: {
    appUserDetail: UserDetail,
    appUserEdit: UserEdit
  }
}

vue-loader하고 있습니다..vue컴포넌트의 정의를 포함하는 파일로 컴포넌트의 템플릿을 효과적으로 조립할 수 있는 레시피를 포함합니다.템플릿에 다른 Vue 컴포넌트가 포함되어 있는 경우 다른 컴포넌트의 정의(컴포넌트 등록이라고도 함)를 제공해야 합니다.@Sumurie8이 지적한 바와 같이,.vue단일 이러한 의 「Importer」에 . 대신 이러한 구성 요소는 임포터의 파일에 명시적으로 등록되어야 합니다.components★★★★★★★★★★★★★★★★★★.

를 들어, 「」의 ,App.vue의 템플릿에는 님의 템플릿이 포함되어 있습니다.<user /> ★★★★★★★★★★★★★★★★★」User.vue하다

<template>
  <div class="user">
    <app-user-edit></app-user-edit>
    <app-user-detail></app-user-detail>
  </div>
</template>

<script>
export default {
  name: 'user'
}
</script>

...그User컴포넌트가 공백이 되어 다음 콘솔오류가 표시됩니다.

[Vue warn]: Unknown custom element: <app-user-edit> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <app-user-detail> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

데모 1

가 Vue를 할 때<user />에 inside inside inside App.vue의 Vue는 내부를 해결하는 방법을 모릅니다.<app-user-detail> ★★★★★★★★★★★★★★★★★」<app-user-edit>컴포넌트 등록이 누락되었기 때문입니다. 오류는 할 수 .User.vue (예:)components★★★★★★★★★★★★★★★★★★★★★」

또는 글로벌 컴포넌트 등록으로 오류를 해결할 수 있습니다.UserDetail ★★★★★★★★★★★★★★★★★」UserEdit 로컬 User.vueVue 인스턴스를 작성하기 전에 글로벌 등록을 해야 합니다.§:

// main.js
import Vue from 'vue';
import UserDetail from '@/components/UserDetail.vue';
import UserEdit from '@/components/UserEdit.vue';

Vue.component('app-user-detail', UserDetail);
Vue.component('app-user-edit', UserEdit);

new Vue(...);

데모 2

의 vue까다로울 수 있습니다.아직 읽지 않으셨다면 vue.js 웹사이트에서 component registration의 구조에 대한 문서를 읽어보실 것을 강력히 권장합니다.구체적으로는 tony19가 글로벌 및 로컬 등록을 언급하고 있습니다.스크린샷에 표시된 코드 예는 실제로 몇 가지 작업을 수행하고 있습니다.하나는 컴포넌트를 로컬로 사용할 수 있게 하고 (그 .vue 파일과 같이) 로컬에서만 사용할 수 있도록 하는 것입니다.또한 템플릿에서 사용할 수 있도록 하고 있습니다.key 기재되어 있다components예에서는 「」)app-user-detail ★★★★★★★★★★★★★★★★★」app-user-edituser-detail ★★★★★★★★★★★★★★★★★」user-edit

한 것은, '아까운', '아까운', '아까운', '아까운', '아까운', '아까운', '아까운', '아까운', '아까운', '아까운',import이 컴포넌트 등록이 기능하는 데 실제로 필요하지 않습니다.단일 파일에 여러 구성 요소를 정의할 수 있습니다.그components키를 누르면 해당 컴포넌트가 무엇을 사용하고 있는지 식별할 수 있습니다. ★★★★★★★★★★★★★★★★★.import에, ★★★★★★★★★★★★★★★★★★★★★★★」vue「」가 합니다.components컴포넌트로 사용하고 있는 것과 다른 코드를 이해하기 위한 키입니다.

마지막으로, 몇몇 다른 답변들이 언급했듯이,components키는 실제로 내보내기가 아닙니다. " " "vue에는 '''가 합니다.export단, 이 명령어는 아래 나열된 컴포넌트를 내보내지 않습니다.components되는 은, 「이것」을 내버려 두는 입니다. ★★★★★★★★★★★★★★★★★★★,vue구성 수도 있고 하지 않을 수도 .나머지 응용 프로그램 설치의 모양에 따라 단일 파일 구성 요소를 사용할 수도 있고 사용하지 않을 수도 있습니다.쪽이든, '어느 쪽이든'은vue는 최상위 레벨에서 시작하여 컴포넌트를 통해 처리됩니다.글로벌 등록을 제외하고 그 아래에서 어떤 컴포넌트가 사용되고 있는지 알 수 있는 최상위 컴포넌트는 없습니다.

, ,의 경우,vue각 컴포넌트는 사용하는 추가 컴포넌트에 대한 참조를 포함해야 합니다. 컴포넌트의이 경우 " " " " ) 。User.vue컴포넌트 자체는 아닙니다( ).UserDetail.vue를 참조해 주세요.

그런 도 있어요.vue에서는 Import 후 두 번째 내보내기가 필요하지만 실제로는 루트 vue 인스턴스가 구성 요소를 렌더링할 수 있도록 다른 작업을 수행하고 있습니다.

덧붙여서, 이 주제에 대한 vue 문서는 매우 훌륭합니다. 아직 작성하지 않았다면 위의 링크 섹션을 참조하십시오. 모듈 Import/export 시스템에 대한 추가 섹션은 요청 내용과 매우 관련이 있다고 생각됩니다.모듈-systems를 참조하십시오.

import는 코드를 현재 파일로 Import하지만, 그 자체로는 아무것도 하지 않습니다.하다

// File helpers.js
export function tickle(target) {
  console.log(`You tickle ${target}`)
}

// File main.js
import { tickle } from 'helpers'

코드를 Import 했지만 아무것도 하지 않습니다.실제로 간지럼을 타려면 관저에 전화를 해야 합니다.

tickle('polar bear');

---

Vue에서 이것은 동일하게 동작합니다.구성 요소(또는 실제로 개체)를 정의하지만 구성 요소 자체로는 아무 작업도 수행하지 않습니다.이 구성 요소를 내보내면 Vue 라이브러리가 이 개체로 작업을 수행할 수 있는 다른 위치로 가져올 수 있습니다.

Vue 구성 요소에서는 현재 구성 요소를 내보내고 템플릿에서 사용하는 구성 요소를 가져옵니다.일반적으로 다음 작업을 수행합니다.

<template>
  <div class="my-component">
    <custom-button color="red" value="Don't click me" @click="tickle" />
  </div>
</template>

<script>
import CustomButton from './CustomButton';

export default {
  name: 'my-component',
  components: {
    CustomButton
  }
}
</script>

구성 요소에서 "사용자 정의 버튼"이라는 이름의 구성 요소를 언급합니다.html을 사용하다그것은 보통 그것을 가지고 무엇을 해야 할지 모른다.라서우 우리 ?떻 떻?? ???우리는 그것을 수입해서 넣는다.components는 이 지도의 이름을 나타내고 있습니다.CustomButton컴포넌트로 이동합니다.이제 컴포넌트를 렌더링하는 방법을 알게 되었습니다.

하여 루트 때 합니다.보통 "Vue"에 .main.js.

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

게게 뭘? ???에게 Vue를 렌더링하도록 합니다.<App/>html로 #app 이 수 ./App.vue.

---

그냥 안 요?exportVue v러 더더 더 v v?한마디로 이야기할 수 없군요., 을 유효한 Javascript로 할 수 가 없고로 할 수 는 버그가 쉽고 하기 쉬우며 이 떨어지기 입니다.그것은 의미가 없고 컴포넌트로 할 수 있는 작업을 엄격하게 제한하기 때문에 컴파일러는 버그가 발생하기 쉽고 이해하기 쉬우며 전체적으로 유용성이 떨어지기 때문입니다.

★★★★★★★의 경우App.vue할 수 User -컴포넌트가 요.default objectUser.vue- - 파 - 。

서서 export default {새로 가져온 구성 요소를 실제로 내보내는 것은 아닙니다.은 완전히 인 것을 입니다.JavaScript Object이 오브젝트는 다른 오브젝트에 대한 참조를 가지고 있습니다.

import오브젝트(또는 함수, 배열 등)는 실제로 그 파일의 내용을 PHP와 같은 컴포넌트에 로드하지 않습니다.컴파일러(아마도 웹 팩)가 프로그램을 구성하는 방법을 알고 있는지 확인하는 것 뿐입니다.기본적으로 참조가 생성되므로 웹 팩은 어디에서 기능을 찾아야 하는지 알 수 있습니다.

TL;DR

import ★★★★★★★★★★★★★★★★★」export여기에서는 개념적으로 다르고 관련이 없는 것들이 있기 때문에 둘 다 사용해야 합니다.

---

Vue 컴포넌트의 Import는 JavaScript의 다른 Import와 동일합니다.

// foo.mjs
export function hello() {
        return "hello world!";
}


// bar.mjs
import { hello } from './foo.mjs';

console.log(hello());

" " " 를 실행합니다.node bar.mjsImport하다정의되어 있거나 실장되어 있는 것을 다른 장소에서 사용하고 싶다면 Vue 컴포넌트인지 여부에 관계없이 Import를 해야 합니다.

내보내기와 관련하여 가져온 구성 요소를 내보내지 않습니다.내보내는 것은 현재 구성 요소뿐입니다. 이 에서는 다른 할 수 .<template>하려면 "서브컴포넌트에서 서브컴포넌트를 components[ ] [ ] 。

언급URL : https://stackoverflow.com/questions/52038615/in-vue-js-why-do-we-have-to-export-components-after-importing-them