Vue中組件模板怎么用-創(chuàng)新互聯(lián)

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

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

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

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

2. 組件間的引用

分3步走，假設(shè)現(xiàn)在有兩個組件 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ù)，注意冒號
  <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 還不錯'
    }, {
     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)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

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

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

廣告

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