這篇文章將為大家詳細講解有關Vue中組件模板怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯專注于裕民網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供裕民營銷型網站建設，裕民網站制作、裕民網頁設計、裕民網站官網定制、微信小程序服務，打造裕民網絡公司原創(chuàng)品牌,更為您提供裕民網站排名全網營銷落地服務。

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>

關于“Vue中組件模板怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文標題：Vue中組件模板怎么用-創(chuàng)新互聯
當前URL：http://jinyejixie.com/article6/dcheog.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站收錄、手機網站建設、App開發(fā)、用戶體驗、動態(tài)網站、全網營銷推廣

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯