Question

我是Vue的新手，我已经读过一两篇有关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'

此外，即使我们删除了上述代码段，我们的样板应用程序也运行正常，所以这是我的两个问题

问题1： import { openURL } from 'quasar'的用途是什么（类似于它的作用）

问题2：模板怎么不包含<quasar-icon>或<quasar-whatever>甚至不将其导入脚本标签中？

Answer 1

模板如何包含<quasar-icon>或<quasar-whatever>甚至不将其导入脚本标签中？

有两种导入组件的方法。第一种方法（我推荐并与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)

import { openURL } from 'quasar'的用途是什么（就像它的用途一样）

我对Quasar并不熟悉，所以在这里我不能给你一个具体的答案（我不知道openURL的作用）。您应该检查Quasar文档。

openURL在这里用作方法。也许是从模板中的某个位置（您已将其从问题中排除）调用的。

Answer 2

A1）导入语句是将代码拆分为不同文件，然后从其他文件或npm模块导入函数/对象/变量的一种方法（es6），请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

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

的注释中的URL

在不声明的情况下使用组件

2 个答案: