本文實(shí)例講述了vue 組件開發(fā)原理與實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的云浮網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

概要

vue 的一個(gè)特點(diǎn)是進(jìn)行組件開發(fā)，組件的優(yōu)勢(shì)是我們可以封裝自己的控件，實(shí)現(xiàn)重用，比如我們?cè)谄脚_(tái)中封裝了自己的附件控件，輸入控件等。

組件的開發(fā)

在vue 中一個(gè)組件，就是一個(gè)獨(dú)立的.vue 文件，這個(gè)文件分為三部分。

1.模板

2.腳本

3.樣式

我們看一個(gè)系統(tǒng)中最常用的組件。

定義好組件后，使用方法如下：

1.import 組件

import RxInput from '@/components/common/form/RxInput';

2.注冊(cè)組件

Vue.component(RxInput.name, RxInput);

3.使用組件

這里我們定義了v-model 我們通過(guò)將數(shù)據(jù)綁定到組件上實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

實(shí)現(xiàn)雙向綁定，需要注意兩點(diǎn)：

1.定義一個(gè)value 的屬性。

在上面組件的代碼中，我們可以看到我們定義了一個(gè)value屬性。

在只讀的情況下 直接綁定顯示。

{{value}}

另外我們?cè)赿ata定義上，將value 賦值給了 currentValue 。這個(gè)值綁定到輸入控件上。

2.數(shù)據(jù)改變時(shí)調(diào)用方法。

this.$emit('input', this.currentValue);

這樣就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。