Использование компонента, даже не объявляя его

Question

Я очень новичок в Vue, и я прочитал об этом одну или две статьи (вероятно, смутно).

Кроме того, поскольку у меня есть некоторое понимание реакции, я склонен полагать, что некоторые вещи работают одинаково (но, вероятно, нет)

В любом случае, я только начал с Quasar и собиралсячерез шаблонный код Quasar

В файле myLayout.vue я вижу, что используется внутри моего шаблона

<template>
  <q-layout view="lHh Lpr lFf">
    <q-layout-header>
      <q-toolbar
        color="negative"
      >
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
        >
          <q-icon name="menu" />
        </q-btn>

на основании моего смутного понимания, я думал, что для каждого компонента, который мы используем для когонам нужно передать реквизиты, которые нам нужно импортировать, но, к сожалению, я не вижу его в своей области сценария импорта

<script>
import { openURL } from 'quasar'

export default {
  name: 'MyLayout',
  data () {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop
    }
  },
  methods: {
    openURL
  }
}
</script>

Я бы подумал, что сценарий будет выглядеть как

<script>
import { openURL } from 'quasar'
import {q-icon} from "quasar"

или, по крайней мере, что-то в этом роде, но здесь у нас есть только

 import { openURL } from 'quasar'

Кроме того, даже если мы удалим приведенный выше фрагмент, наше приложение-шаблон выглядит нормально, поэтому вот мои два вопроса

Вопрос 1: Какая польза от import { openURL } from 'quasar' (например, что он делает)

Вопрос 2: Как шаблон может содержать <quasar-icon>или <quasar-whatever>, даже не импортируя его вскрипт сценария?

Answer 1

Как шаблон может содержать <quasar-icon> или <quasar-whatever>, даже не импортируя его в тег скрипта?

Существует два способа импорта компонентов.Первый способ (который я рекомендую и который больше всего похож на React) - это импортировать компонент и добавить его к опции components внутри компонента, в котором вы хотите его использовать.

Приложение.vue

<div>
  <my-component/>
</div>

import MyComponent from 'my-component'

export default {
  components: {
    MyComponent
  }
}

Второй способ - импортировать его глобально для использования в любом компоненте Vue в вашем приложении.Вам нужно сделать это только один раз в сценарии ввода вашего приложения.Это то, что делает Квазар.

main.js

import Vue from 'vue'
import MyComponent from 'my-component'

Vue.component('my-component', MyComponent)

Какая польза от import { openURL } from 'quasar' (например, от того, что он делает)

Я не знаком с Квазаром, поэтому не могу дать вам конкретного ответа здесь (я не знаю, что делает openURL).Вы должны проверить документы Quasar.

openURL используется здесь в качестве метода.Возможно, он вызывается откуда-то из шаблона (который вы исключили из вопроса).

Answer 2

A1) Оператор импорта - это 1 способ (es6) способа разбить ваш код на разные файлы, а затем импортировать функции / объекты / переменные из других файлов или модулей npm, см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

A2) Vue позволяет 2механизмы для регистрации компонентов.Глобальный и локальный.Глобально зарегистрированные компоненты не должны импортироваться и регистрироваться в каждом компоненте перед использованием (в шаблоне или визуализации fn).См. URL из комментария выше https://vuejs.org/v2/guide/components-registration.html#Global-Registration