进出口报表

Question

I am new to Vue and have previously used React to build small apps.

Now, I was going through through the boilerplate code for Vue

Consider this 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>

Here, I am unable to comprehend following things related to import and export.

Starting from the beginning

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

here it seems we passing props to our child component.

In react, we used to import statements at the top of the app and then use it in our stateful or stateless component but in contrast, in the above code snippet we are importing it after inside the script tag so as JS compiles the code, how would it know what

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

is HelloWorld? since it is declared afterwards.

Secondly, I have always worked with exporting and importing functions/classes and this is different and now for me to comprehend. Consider this children component

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

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

Here, I am unable to comprehend what is happening in export default? I know what export default does but like what is the significance of having properties like name and props inside it?

Answer 1

It's the way Vue is structured. The export default part that you write in the bottom is the part you import/export to the Vue ecosystem (and to your components), this is an ES6/ES2015 feature(module system), one thing to note that the structure you are using is called Single File Components (.vue files).

One great thing about single file components that I like is that you can import another component within the script tag (See: Component Registration) , just above export default, then you can reference it in the export default object(exposing it to your component).