進出口報表

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 文件）。

我喜歡的單個文件組件的一大優點是您可以在腳本標記中導入另一個組件（請參閱：組件注冊） ，就在導出默認值之上，然后您可以在導出默認對象中引用它（將其公開給您的組件） .