欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue組件開發(fā)初探

 更新時(shí)間:2017年02月14日 10:40:43   作者:Taikyo  
本篇文章主要介紹了Vue組件開發(fā)初探,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

注冊(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)該怎么來讓父組件傳遞消息給子組件呢,這里用到了一個(gè)屬性值props,如下

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

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

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

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

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

自定義事件

父子組件之間如果通過props來傳遞數(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方法里面,通過this.$emit('increment')來執(zhí)行我們自定義的事件,假如我們需要在$emit中添加參數(shù),那么我們就要在$on()中進(jìn)行回調(diào)的處理

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

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

v-model="message"

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

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事件
來看看我們的自定義控件

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

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

在上面,我們通過 :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組件的就先寫到這,接下來還有事件分發(fā),就接下來再寫。由于理解的不同,可能有寫得不好的,所以有錯(cuò)誤的地方請(qǐng)指正。

相關(guān)文章

  • vue?雙向綁定問題$emit無效的解決

    vue?雙向綁定問題$emit無效的解決

    這篇文章主要介紹了vue?雙向綁定問題$emit無效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑

    Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑

    這篇文章主要介紹了Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼

    基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼

    這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • 關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁報(bào)404錯(cuò)誤解決

    關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁報(bào)404錯(cuò)誤解決

    這篇文章主要介紹了關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁報(bào)404錯(cuò)誤解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue之多項(xiàng)目|多工程共用相同組件的思路解讀

    vue之多項(xiàng)目|多工程共用相同組件的思路解讀

    這篇文章主要介紹了vue之多項(xiàng)目|多工程共用相同組件的思路,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能

    使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能

    在Web應(yīng)用中,倒計(jì)時(shí)功能常用于各種場(chǎng)景,如活動(dòng)倒計(jì)時(shí)、定時(shí)任務(wù)提醒等,Vue.js作為一款輕量級(jí)的前端框架,提供了豐富的工具和API來實(shí)現(xiàn)這些功能,本文將詳細(xì)介紹如何使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能,需要的朋友可以參考下
    2024-09-09
  • 傻瓜式vuex語法糖kiss-vuex整理

    傻瓜式vuex語法糖kiss-vuex整理

    kiss-vuex 是一個(gè)非常簡(jiǎn)單的語法糖類庫,這篇文章主要介紹了傻瓜式vuex語法糖kiss-vuex整理,非常具有實(shí)用價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • Vue.Draggable實(shí)現(xiàn)交換位置

    Vue.Draggable實(shí)現(xiàn)交換位置

    這篇文章主要為大家詳細(xì)介紹了Vue.Draggable實(shí)現(xiàn)交換位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別

    詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別

    這篇文章主要介紹了詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果

    vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)懸浮框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03

最新評(píng)論