Vue中組件模板如何用

這篇文章主要介紹了Vue中組件模板如何用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue中組件模板如何用文章都會(huì)有所收獲，下面我們一起來看看吧。

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

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

2. 組件間的引用

分3步走，假設(shè)現(xiàn)在有兩個(gè)組件 App.vue，和 Add.vue，現(xiàn)在要把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. 組件間數(shù)據(jù)的傳遞

假將要將App.vue組件中的數(shù)據(jù)傳遞到Ad.vue組件中

App.vue

<template>
  // 第3步
  // 傳遞數(shù)據(jù)，注意冒號(hào)
  <Add :comments="comments"/>
</template>


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


<style>

</style>

Add.vue

<script>
  export default{
   // 聲明接收comments數(shù)據(jù)
   props: ['comments']

  }
</script>

關(guān)于“Vue中組件模板如何用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue中組件模板如何用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。