进出口报表

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>

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

从头开始

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

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

在 react 中，我们曾经在应用程序顶部导入语句，然后在我们的有状态或无状态组件中使用它，但相比之下，在上面的代码片段中，我们在 script 标签之后导入它，以便 JS 编译代码，如何它会知道什么

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

是你好世界吗？ 因为它是在之后宣布的。

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

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

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

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

Answer 1

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

我喜欢的单个文件组件的一大优点是您可以在脚本标记中导入另一个组件（请参阅：组件注册） ，就在导出默认值之上，然后您可以在导出默认对象中引用它（将其公开给您的组件） .