В Vue.js почему мы должны экспортировать компоненты после их импорта?

Question

В PHP, когда мы включаем код из другого файла, мы включаем его, и все, код теперь доступен нам в файле, в котором мы выполняли включение. Но в Vue.js после импорта компонента мы также должны его экспортировать.

Почему? Почему бы нам просто не импортировать его?

Answer 1

Чтобы App.vue мог использовать User -компонент, вам нужно экспортировать default object User.vue -файла.

В export default { вы фактически не экспортируете недавно импортированные компоненты. Вы просто экспортируете абсолютно нормальный JavaScript Object. У этого объекта просто есть ссылка на другой объект.

Когда вы import объект (или функция или массив или ...), он на самом деле не загружает содержимое этого файла в ваш компонент, такой как PHP. Это просто гарантирует, что ваш компилятор (возможно, веб-пакет) знает, как структурировать программу. Он в основном создает ссылку, поэтому веб-пакет знает, где искать функциональность.

Answer 2

в Vue.js, после импорта компонента мы также должны его экспортировать.

Я думаю, вы, возможно, обращаетесь к следующим строкам в User.vue и задаетесь вопросом, почему UserDetail и UserEdit импортируются в файл и затем экспортируются в свойство components экспорта скрипта:

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

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

vue-loader ожидает, что экспорт скрипта файла .vue будет содержать определение компонента, которое фактически включает в себя рецепт для сборки шаблона компонента. Если в шаблоне содержатся другие компоненты Vue, необходимо предоставить определение других компонентов, иначе называемое регистрация компонентов . Как указывало @ Sumurai8, импорт файлов .vue сам по себе не регистрирует соответствующие однофайловые компоненты; скорее, эти компоненты должны быть явно зарегистрированы в свойстве 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 /> внутри шаблона App.vue, Vue не знает, как разрешить внутренние <app-user-detail> и <app-user-edit>, поскольку отсутствуют регистрации их компонентов. Ошибки могут быть устранены путем локальной регистрации компонента в User.vue (т. Е. Свойство components, показанное выше).

В качестве альтернативы, ошибки могут быть устранены с помощью глобальной регистрации компонентов из UserDetail и UserEdit, что устранит локальную регистрацию в User.vue. Обратите внимание, что глобальная регистрация должна быть сделана до создания экземпляра Vue. Пример:

// 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

Answer 3

Компоненты в vue могут быть хитрыми. Если вы еще этого не сделали, я настоятельно рекомендую прочитать документацию на веб-сайте vue.js о том, как работает регистрация компонентов, в частности, так как tony19 упоминает о глобальной и локальной регистрации . Пример кода, который вы показываете на своем скриншоте, на самом деле делает пару вещей. С одной стороны, это делает компоненты доступными локально и только локально (как в этом файле .vue) для использования. Кроме того, он делает его доступным для шаблона как key, предоставленный вами в объекте components, в данном случае app-user-detail и app-user-edit вместо user-detail и user-edit.

Важно отметить, что import на самом деле не требуется для функционирования регистрации этого компонента. Вы могли бы иметь несколько компонентов, определенных в одном файле. Клавиша components позволяет определить, что использует этот компонент. Так что import не требуется, поэтому vue требует ключ components, чтобы понять, что вы используете в качестве компонента, и что такое просто другой код.

Наконец, как уже упоминалось в некоторых других ответах, клавиша components на самом деле не является экспортом. Для подписи компонента vue по умолчанию требуется export, но это , а не , при котором экспортируются компоненты, перечисленные под ключом components. Что он делает, так это позволяет vue строить сверху вниз. В зависимости от того, как выглядит остальная часть вашего приложения, вы можете использовать отдельные файловые компоненты или нет. В любом случае, vue начнется с верхнего уровня vue instance и будет проходить вниз через компоненты, за исключением глобальной регистрации, ни один компонент верхнего уровня не знает, какие компоненты используются ниже он .

Это означает, что vue отображает все правильно, каждый компонент должен содержать ссылку на дополнительные компоненты, которые он использует. Эта ссылка экспортируется как часть компонента более высокого уровня (в вашем случае User.vue), но не самого компонента (UserDetail.vue).

Так что может показаться, что vue требуется второй экспорт после импорта, но на самом деле он делает что-то еще, чтобы позволить корневому экземпляру vue отобразить ваш компонент.

Кроме того, справочная документация по этому вопросу действительно неплохая, если вы еще этого не сделали, взгляните на разделы, которые я привел выше. Существует дополнительный раздел, посвященный системам импорта / экспорта модулей, который, по-видимому, имеет большое отношение к тому, о чем вы просите, вы можете найти здесь: Module-systems .

Answer 4

import импортирует код в текущий файл, но сам по себе ничего не делает. Представьте себе следующий не-vue код:

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

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

Вы импортировали код, но он ничего не делает. Чтобы что-то щекотать, нужно вызвать функцию.

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>

Ваш компонент упоминает компонент с именем "custom-button". Это не обычный элемент 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.

---

Но не можем ли мы просто опустить export, если компилятор Vue был «умнее»? И да и нет. Да, потому что компилятор может преобразовать многие вещи в действительный javascript, и нет, потому что это не имеет смысла и серьезно ограничивает то, что вы можете делать с вашим компонентом, а также делает компилятор более подверженным ошибкам, менее понятным и в целом менее полезным.