Vue組件模板如何使用

本篇內容主要講解“Vue組件模板如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue組件模板如何使用”吧!

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

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

2. 組件間的引用

分3步走，假設現(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>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應的地方，所以越來越多的前端開發(fā)者使用vue。

到此，相信大家對“Vue組件模板如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！