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"/>

HelloWorld是吗？因为它是在以后宣布的。

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

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

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

在这里，我无法理解出口违约情况。我知道什么是导出默认值，但是喜欢在其中包含名称和道具等属性的意义是什么？

Answer 1

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

我喜欢的单个文件组件的一个很棒的事情是，您可以在脚本标签(See: Component Registration)中导入另一个组件，该组件位于导出默认对象的正上方，然后可以在导出默认对象中引用它（将其暴露给您的组件）。

进出口声明

1 个答案: