下面我將使用Vue自帶的屬性實(shí)現(xiàn)簡(jiǎn)單的雙向綁定。

下面的例子就是利用了父組件傳給子組件（在子組件定義props屬性，在父組件的子組件上綁定屬性），子組件傳給父組件（在子組件使用$emit()屬性定義一個(gè)觸發(fā)方法，在父組件上的子組件監(jiān)聽(tīng)這個(gè)事件）。

import Vue from ’vueEsm’ var Com = { name:’Com’, props:[’val’], template:`<input type=’text’ @input=’handleInput’/>`, methods: { handleInput(e){ this.$emit('input',e.target.value); } },}new Vue({ el:’#app’, data() { return { value:’’ } }, components:{ Com }, template:` <div> <Com @input=’post’ :val=’value’></Com> </div> `, methods:{ post(data){ this.value=data; } } })

上面這個(gè)例子，在input標(biāo)簽上每次輸入時(shí)觸發(fā)原生事件input，在這個(gè)事件上綁定了一個(gè)handleInput方法，事件每次觸發(fā)都會(huì)執(zhí)行方法里的$emit屬性。該屬性里面第一個(gè)參數(shù)可以定義一個(gè)事件名，第二個(gè)參數(shù)可以傳一個(gè)參數(shù)。這里我們把每次輸入的值e.target.value傳進(jìn)去。在父組件的子組件上監(jiān)聽(tīng)這個(gè)事件，定義一個(gè)post方法，方法的參數(shù)就是傳入的數(shù)據(jù)。然后我們?cè)诟附M件的data屬性里定義一個(gè)存儲(chǔ)值的變量value。將剛才傳入的參數(shù)賦給這個(gè)變量value。最后在父組件的子組件上綁定一個(gè)自定義屬性，比如val。將value傳給val。在子組件定義一個(gè)props屬性接受這個(gè)val。

這個(gè)例子對(duì)于理解父組件與子組件傳值特別重要。

下方舉例說(shuō)明了我的一個(gè)自定義mySelect的實(shí)現(xiàn)過(guò)程：

<template> <div class='select'> <div @click='collapse=!collapse'> <span v-if='currentValue'>{{currentLabel||currentValue}}</span> <span v-else class='placeholder'>{{placeholder}}</span> <span :class='collapse?’arrow-down’:’arrow-up’'></span> </div> <div v-show='!collapse'> <div v-for='item in data' :key='item.id' @click='chooseItem(item)'>{{item[itemLabel?itemLabel:’name’]}}</div> </div> </div></template><script> export default { name: 'mySelect', props: [ ’value’, ’placeholder’, ’data’, ’itemLabel’, ’itemValue’ ], data() { return { collapse: true, currentValue: ’’, currentLabel: ’’, } }, watch: { value: { immediate: true, handler(value) { this.currentValue = value; this.$emit(’input’, value); this.data.forEach(item => { if (item[this.itemValue ? this.itemValue : ’id’] == value) { return this.currentLabel = item[this.itemLabel ? this.itemLabel : ’name’]; } }); } }, data:{ immediate: true, handler(arr) { if(this.value||!this.currentLabel){ arr.forEach(item=>{ if(item[this.itemValue ? this.itemValue : ’id’] == this.value){this.currentLabel = item[this.itemLabel ? this.itemLabel : ’name’];return; } }) } } } }, methods: { chooseItem(item) { if (this.currentValue !== item[this.itemValue ? this.itemValue : ’id’]) { this.$emit(’change’,item[this.itemValue ? this.itemValue : ’id’]); } this.currentValue = item[this.itemValue ? this.itemValue : ’id’]; this.currentLabel = item[this.itemLabel ? this.itemLabel : ’name’]; this.$emit(’input’, this.currentValue); this.collapse = true; } } }</script><style lang='scss' scoped> .select { position: relative; .input { width: 100%; height: 30px; line-height: 30px; background-color: #fff; border: 1px solid #02b4fe; border-radius: 0 3px 3px 0; padding-left: 10px; color: #666; position: relative; .placeholder { color: #aaa; } } .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #02b4fe; position: absolute; right: 5px; top: 10px; } .arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #02b4fe; position: absolute; right: 5px; top: 10px; } .option-list { max-height: 200px; overflow-y: scroll; position: absolute; top: 2rem; left: 0; z-index: 5; width: 100%; padding: 0 5px; font-size: 10px; color: #aaa; background-color: #fff; text-align: left; box-shadow: 0 0 5px rgba(0, 0, 0, .1); border: 1px solid rgb(79, 192, 232); .option-item { text-align: center; line-height: 1.5rem; } } }</style>

如上所示，當(dāng)聲明了mySelect組件之后，在項(xiàng)目中實(shí)際使用時(shí)，就可以如下所示直接使用：

<template> <mySelect v-model='testValue' placeholder='請(qǐng)選擇' :data='testArr' item-label='id' item-value='name'></mySelect></template><script> import mySelect from ’./mySelect’ export default{ components:{ mySelect }, data(){ return { testValue:’’, testArr:[] } }, mounted(){ //預(yù)置select的下拉選擇基礎(chǔ)數(shù)據(jù)，數(shù)據(jù)為對(duì)象數(shù)組，包含id和name屬性 }}</script>

以上就是一個(gè)簡(jiǎn)單的自定義雙向綁定組件的實(shí)現(xiàn)，包括簡(jiǎn)單的使用過(guò)程。在vue中的自定義組件，關(guān)于props的聲明時(shí)，還是盡量使用官方建議的對(duì)象方式，可以聲明屬性的默認(rèn)值和數(shù)據(jù)類型。我這邊偷懶了用的是props的字符串?dāng)?shù)組簡(jiǎn)寫方式，但是這樣的話對(duì)使用組件時(shí)的錯(cuò)誤調(diào)試不利。所以，盡量不要學(xué)我偷懶噢，親~~~

到此這篇關(guān)于Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue props、emit實(shí)現(xiàn)自定義雙向綁定內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！