vue組件之間的引用

有個App.vue，需要引入HelloWorld.vue的組件

HelloWorld.vue

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

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

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <hello-world msg="Welcome to Your Vue.js App"></hello-world>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

說明：要引入一個組件，有這麼幾個步驟：

1 導入：import HelloWorld from './components/HelloWorld.vue'

2 聲明：components: { HelloWorld }

3 使用引入的組件：2種格式都可以

 <hello-world></hello-world>或<hello-world></hello-world>     //這裏是將組件名按單詞用‘-’分開，並且都是小寫

   <HelloWorld></HelloWorld>或<HelloWorld/>                                   //這裏就是組件本身定義的名字作爲標籤名