javascript - import/export 报表

Question

我是 Vue 的新手，之前使用过 React 来构建小应用。

现在，我正在浏览 Vue 的样板代码

考虑这个 app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

在这里，我无法理解以下与 import/export 有关的事情。

从头开始

  <HelloWorld msg="Welcome to Your Vue.js App"/>

这里似乎我们将 Prop 传递给我们的子组件。

在 React 中，我们过去常常在应用程序的顶部导入语句，然后在我们的有状态或无状态组件中使用它，但相比之下，在上面的代码片段中，我们在脚本标签内导入它，以便 JS 编译代码，它怎么会知道什么

  <HelloWorld msg="Welcome to Your Vue.js App"/>

是HelloWorld吗？因为它是在之后声明的。

其次，我一直从事导出和导入函数/类的工作，这是不同的，现在让我理解。考虑这个子组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

在这里，我无法理解 export default 中发生了什么？我知道 export default 的作用，但喜欢其中包含 name 和 props 等属性的意义是什么？

Answer 1

这是 Vue 的结构方式。您写在底部的导出默认部分是您导入/导出到 Vue 生态系统(以及您的组件)的部分，这是 ES6/ES2015 功能(模块系统)，需要注意的是您使用的结构叫做Single File Components (.vue 文件)。

我喜欢的单个文件组件的一个优点是您可以在脚本标记内导入另一个组件 (See: Component Registration) , 就在 export default 上面，然后你可以在 export default 对象中引用它(将它暴露给你的组件)。