vue組件模板及組件間的引用

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>