這篇文章將為大家詳細(xì)講解有關(guān)如何使用vue寫一個組件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、渾源網(wǎng)站維護、網(wǎng)站推廣。

寫一個vue組件

我下面寫的是以.vue結(jié)尾的單文件組件的寫法，是基于webpack構(gòu)建的項目。如果還不知道怎么用webpack構(gòu)建一個vue的工程的，可以移步到vue-cli。

一個完整的vue組件會包括一下三個部分：

1. template：模板

2. js： 邏輯

3. css ： 樣式

每個組件都有屬于自己的模板，js和樣式。如果將一個頁面比喻成一間房子的話，組件就是房子里的客廳、臥室、廚房、廁所。如果把廚房單獨拿出來的話，組件又可以是刀、油煙機...等等。就是說頁面是由組件構(gòu)成的，而組件也可以是組件構(gòu)成的。這樣就可以非常的靈活，耦合性也非常的低。

先來看看一個組件在不是.vue文件內(nèi)的寫法：

Vue.component('simple-counter', {
 template: '<div id="inputBox"><input type="text"></div>',
 data () {   // 數(shù)據(jù)
 return {
  counter: 0
 }
 },
 methods: {
 // 寫點方法
 },
 created () {
 // 生命鉤子
 },
 computed: {
 // 計算屬性
 }
})

template是用來干嘛的呢？

<template>
 <div id="inputBox">
 <input type="text">
 </div>
</template>
<!--
template就是這個組件的html，也就是下面部分（vue-loader會將template標(biāo)簽下的內(nèi)容解析出來）：
-->
<div id="inputBox">
 <input type="text">
</div>
<!--
 對應(yīng)原生寫法的話，就是template內(nèi)的dom字符串
-->

js部分

export default {
 data () {
 return {
  counter: 0
 }
 },
 methods: {
 // 方法
 },
 created () {
 // 生命鉤子
 },
 computed: {
 // 計算屬性
 }
}
// 在這里很明顯js部分就是對應(yīng)的原生寫法內(nèi)的非template部分了。
// export default這個是es6的模塊寫法，不懂的可以先去了解es6的模塊化

css部分

<style lang="scss" scoped>
...樣式
</style>

<!--這里的你可以使用scss（CSS擴展語言）只要安裝"sass-loader"和"node-sass"這兩個npm包就好了，vue-cli已經(jīng)配好相關(guān)參數(shù)了。如果想使用less或其它css擴展語音，只要裝好各自的編譯包就好了。而scoped是讓css的作用域只在該文件下。-->

引入

要怎么在其它組件引用該組件？

組件一（button.vue）

<template>
 <div class="button">
 <button @click="onClick">{{text}}</button>
 </div>
</template>
<script>
export default {
 props: ['text'],   // 獲取父組件的傳值
 data () {
 return {

 }
 },
 methods: {
 onClick () {
  console.log('點擊了子組件')
 }
 }
}
</script>
<style lang="scss" scoped>
.button {
 button {
 width: 100px;
 }
}
</style>

組件二（box.vue）

<template>
 <div class="box">
 <v-button :text="text"></v-button>    <!--使用組件并傳值（text）-->
 </div>
</template>
<script>
import Button from './button.vue'  // 引入子組件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按鍵的name'
 }
 },
 methods: {

 }
}
</script>

關(guān)于“如何使用vue寫一個組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章題目：如何使用vue寫一個組件
文章URL：http://aaarwkj.com/article22/jeeijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站收錄、微信小程序、靜態(tài)網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(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)