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

Я очень новичок в 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> даже не импортируя его в тег скрипта?

Источник

2 ответа

Решение

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

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

App.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' (как то, что он делает)

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

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

Источник

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

Источник
Другие вопросы по тегам