进出口报表答案

【问题标题】：import and export statements进出口报表
【发布时间】：2019-07-02 04:56:14
【问题描述】：

我是 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>

在这里，我无法理解以下与进出口有关的事情。

从头开始

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

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

在 react 中，我们曾经在应用程序的顶部导入语句，然后在我们的有状态或无状态组件中使用它，但相比之下，在上面的代码 sn-p 中，我们在 script 标签之后导入它，以便 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 是做什么的，但喜欢在其中包含 name 和 props 等属性的意义是什么？

【问题讨论】：

export default 只是导出一个对象而不是一个函数或类，没有什么特别的事情发生。
@MatthewHerbst 那么在其中包含 name 和 props 等属性的意义是什么？
从export的角度来看，没什么。它可能是 vue 使用的东西，但那里没有魔法
Vue 组件具有特定的预定结构。阅读components registration here。

标签： javascript vue.js

【解决方案1】：

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

我喜欢单个文件组件的一个好处是您可以在脚本标记(See: Component Registration) 中导入另一个组件，就在导出默认值之上，然后您可以在导出默认对象中引用它（将其公开给您的组件） .

【讨论】：