甚至不声明就使用组件

Question

我是 Vue 的新手，我已经阅读了一两篇关于它的文章（可能是模糊的）。

此外，由于我对 React 有一些了解，所以我倾向于假设某些事情以相同的方式工作（但可能并非如此）

无论如何，我刚开始使用 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'

此外，即使我们删除了上面的代码片段，我们的样板应用程序看起来也能正常工作，所以这是我的两个问题

问题一：import { openURL } from 'quasar'有什么用（喜欢它的作用）

问题 2：模板如何包含 <quasar-icon> 或 <quasar-whatever> 而无需在脚本标签中导入它？

Answer 1

A1) Import 语句是一种 (es6) 方式，可以将您的代码拆分到不同的文件中，然后从其他文件或 npm 模块中导入 functions/objects/vars 参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

A2) Vue 允许两种机制来注册组件。全球和本地。全局注册的组件不必在使用前在每个组件中导入和注册（在模板或渲染 fn 中）。请参阅上面评论中的 URL https://vuejs.org/v2/guide/components-registration.html#Global-Registration

Answer 2

How can template contain <quasar-icon> or <quasar-whatever> without even importing it in script tag?

有两种导入组件的方法。第一种方法（我推荐，并且与 React 最相似）是导入组件并将其添加到要在其中使用它的组件内的 components 选项。

App.vue

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

import MyComponent from 'my-component'

export default {
  components: {
    MyComponent
  }
}

第二种方法是全局导入它，以便在您应用的任何 Vue 组件中使用。您只需在应用程序的入口脚本中执行一次。这就是 Quasar 正在做的事情。

main.js

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

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

What is the use of import { openURL } from 'quasar' (like what it does)

我对Quasar不熟悉，所以不能在这里给你一个具体的答案（我不知道openURL是干什么的）。您应该查看 Quasar 文档。

openURL 在这里被用作一种方法。也许它是从模板中的某处调用的（您已将其排除在问题之外）。

甚至不声明就使用组件

Using component without even declaring it

javascript

vue.js

quasar-framework