快捷導(dǎo)航

Vue組件開發(fā)初探

更新時(shí)間：2017年02月14日 10:40:43 作者：Taikyo

本篇文章主要介紹了Vue組件開發(fā)初探，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

注冊(cè)一個(gè)組件

有兩種方式可以注冊(cè)一個(gè)組件，第一種是全局注冊(cè)，第二種是局部注冊(cè)

# 全局注冊(cè)
Vue.component('my-component',{
  template: '<span>Hello</span>'
})

# 局部注冊(cè)
var child = {
  template: '<span>Hello</span>'
}
new Vue({
  // ···
  components:{
    my-component: child
  }
})

注意：組件的注冊(cè)必須要在Vue實(shí)例創(chuàng)建之前

使用組件

<div id="app">
  <my-component></my-component>
</div>

當(dāng)我們需要使用到data時(shí)，data必須是一個(gè)函數(shù)，否則將會(huì)報(bào)錯(cuò)，這是Vue的一個(gè)規(guī)則，如下

Vue.component('my-component',{
  template: '<span>{{message}}</span>',
  data:function(){
    return {message:'hello'}
  }
})

組件間消息傳遞

當(dāng)我們封裝了組件A，但是組件A又嵌套了組件B，這時(shí)候組件AB形成了父子組件的關(guān)系，我們應(yīng)該怎么來(lái)讓父組件傳遞消息給子組件呢，這里用到了一個(gè)屬性值props，如下

Vue.component('my-component',{
  props: ['message']
  template: '<span>{{message}}</span>'
})

# 通過(guò)props傳遞消息給子組件
<my-component message="Hello"></my-component>

上面的例子，我們通過(guò)props傳遞了參數(shù)給子組件，確實(shí)能改變子組件的值，但是，假如我們有這樣一個(gè)要求，props的值是動(dòng)態(tài)改變的，那么這種靜態(tài)字面量傳遞參數(shù)的方式就不能滿足我們的需求了。如下將說(shuō)明如何進(jìn)行動(dòng)態(tài)的props值設(shè)定

<div id="app">
  <input v-model="parentMsg"><br>
  <my-component v-bind:message="parentMsg">
</div>

這里通過(guò)v-bind的命令，將我們的message與parentMsg進(jìn)行綁定，這樣，當(dāng)我們的parentMsg改變時(shí)，message將能實(shí)時(shí)改變

自定義事件

父子組件之間如果通過(guò)props來(lái)傳遞數(shù)據(jù)的話，那么似乎只能進(jìn)行單向的數(shù)據(jù)傳遞，只能從父組件向子組件傳遞，假如我們需要從子組件傳遞消息回去，那么就需要用到自定義事件了

# 使用v-on綁定自定義事件
Vue.component('my-component',{
  template: '<button v-on:click="increment">{{counter}}</button>',
  data: function(){
    return {counter: 0}
  },
  methods: {
    increment: function(){
      this.counter += 1;
      this.$emit(increment);
    }
  }
})
new Vue({
  el: '#app',
  data: {
    // ···
    total:0
  },
  methods: {
    // ···
    incrementTotal: function(){
      this.total += 1;

    }
  }
})

<div id="app">
  // ···
  <p>{{total}}</p>
  <my-component v-on:increment="incrementTotal"></my-component>
</div>

這里，我們點(diǎn)擊按鈕，按鈕的顯示的數(shù)值將會(huì)改變，同時(shí)，total的值也會(huì)動(dòng)態(tài)的改變，這就是子組件回傳數(shù)據(jù)的實(shí)例，我們點(diǎn)擊按鈕時(shí)，將會(huì)首先執(zhí)行button的onclick方法，在onclick方法里面，通過(guò)this.$emit('increment')來(lái)執(zhí)行我們自定義的事件，假如我們需要在$emit中添加參數(shù)，那么我們就要在$on()中進(jìn)行回調(diào)的處理

我們接下來(lái)自定義一個(gè)表單輸入控件，我們?cè)谳斎肟蛑休斎胄畔?，同時(shí)在P標(biāo)簽中顯示出來(lái)。

這里我們平時(shí)使用的

v-model="message"

其實(shí)是下面語(yǔ)句的一個(gè)簡(jiǎn)化版本，也就是語(yǔ)法糖

v-bind:value="message" v-on:input="message = arguments[0]"

或者

v-bind:value="message" v-on:input="message = $event.target.value"

那么自定義表單控件我們需要干什么呢？

為了讓v-model生效，我們需要在子組件中定義一個(gè)value的屬性，還有一個(gè)監(jiān)聽新值產(chǎn)生的input事件
來(lái)看看我們的自定義控件

復(fù)制代碼代碼如下:

<my-input label="Message" :value="message" @input="message = arguments[0]"></my-input>

在上面，我們通過(guò) :value="message" 綁定一個(gè)value使其與上一級(jí)組件的message相掛鉤，后面這個(gè) v-on:input 是子組件定義的事件，事件名可以自己定義，arguments[0] 是組件自定義時(shí)傳入的第一個(gè)參數(shù)

完整代碼如下:

# 使用自定義事件的表單輸入控件
Vue.component('my-input',{
  template: '\
  <div>\
  <label>{{label}} :</label>\
  <input v-bind:value="value" v-on:input="onInput"></input>\
  </div>\
  '
  ,
  props:['value','label'],
  methods:{
    onInput:function(event){
      this.$emit('input',event.target.value);
      // this.$emit('input')
    }
  }

})

<div id="app">
  <p>{{message}}</p>
  <my-input label="Message" v-model="message"></my-input><br>
  <!-- <my-input label="Message" :value="message" @input="message = arguments[0]"></my-input> -->

</div>

我們?cè)诙x內(nèi)部事件時(shí)，調(diào)用到了$emit(),為了讓message能動(dòng)態(tài)改變，我們需要將輸入的參數(shù)回傳回去，這樣才能使外部組件與我們的表單控件顯示一致

Vue組件的就先寫到這，接下來(lái)還有事件分發(fā)，就接下來(lái)再寫。由于理解的不同，可能有寫得不好的，所以有錯(cuò)誤的地方請(qǐng)指正。

您可能感興趣的文章: