注冊一個組件

承德縣網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

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

# 全局注冊
Vue.component('my-component',{
  template: 'Hello'
})

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

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

使用組件

當(dāng)我們需要使用到data時，data必須是一個函數(shù)，否則將會報錯，這是Vue的一個規(guī)則，如下

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

組件間消息傳遞

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

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

# 通過props傳遞消息給子組件

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

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

自定義事件

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

# 使用v-on綁定自定義事件
Vue.component('my-component',{
  template: '{{counter}}',
  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;

    }
  }
})

  // ···
  
{{total}}
  

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

我們接下來自定義一個表單輸入控件，我們在輸入框中輸入信息，同時在P標簽中顯示出來。

這里我們平時使用的

v-model="message"

其實是下面語句的一個簡化版本，也就是語法糖

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

或者

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

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

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

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

完整代碼如下:

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

})

  
{{message}}
  

  

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

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