1. vue元件都是由這三部分組成

<template>
 <div>
 </div>
</template>
<script>
 export default{}
</script>
<style>
</style>

2. 元件間的引用

分3步走，假設現在有兩個元件 App.vue，和 Add.vue，現在要把Add.vue元件引入到App.vue元件中

App.vue

<template>
  // 第3步
  <Add/>
</template>
<script>
   // 第1步
  import Add from './components/Add.vue'
  // 第2步
  components: {
   Add
  }
 }
</script>
<style>

</style>

3. 元件間資料的傳遞

假將要將App.vue元件中的資料傳遞到Ad.vue元件中

App.vue

<template>
  // 第3步
  // 傳遞資料，注意冒號
  <Add :comments="comments"/>
</template>


<script>
   // 第1步
  import Add from './components/Add.vue'
  // 第2步
  components: {
   Add
  },// App元件中初始化的資料
   data(){
   return {
    comments: [{
     name: 'Bob',content: 'Vue 還不錯'
    },{
     name: 'Cat',content: 'Vue so Easy'
    },{
     name: 'BZ',content: 'Vue so so'
    }
    ]
   }
  }
 }
</script>


<style>

</style>

Add.vue

<script>
  export default{
   // 宣告接收comments資料
   props: ['comments']

  }
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。