Vue 如何使用props、emit實現自定義雙向綁定的實現

下面我將使用Vue自帶的屬性實現簡單的雙向綁定。

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

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; } } })

上面這個例子，在input標簽上每次輸入時觸發原生事件input，在這個事件上綁定了一個handleInput方法，事件每次觸發都會執行方法里的$emit屬性。該屬性里面第一個參數可以定義一個事件名，第二個參數可以傳一個參數。這里我們把每次輸入的值e.target.value傳進去。在父組件的子組件上監聽這個事件，定義一個post方法，方法的參數就是傳入的數據。然后我們在父組件的data屬性里定義一個存儲值的變量value。將剛才傳入的參數賦給這個變量value。最后在父組件的子組件上綁定一個自定義屬性，比如val。將value傳給val。在子組件定義一個props屬性接受這個val。

這個例子對于理解父組件與子組件傳值特別重要。

下方舉例說明了我的一個自定義mySelect的實現過程：

<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>

如上所示，當聲明了mySelect組件之后，在項目中實際使用時，就可以如下所示直接使用：

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

以上就是一個簡單的自定義雙向綁定組件的實現，包括簡單的使用過程。在vue中的自定義組件，關于props的聲明時，還是盡量使用官方建議的對象方式，可以聲明屬性的默認值和數據類型。我這邊偷懶了用的是props的字符串數組簡寫方式，但是這樣的話對使用組件時的錯誤調試不利。所以，盡量不要學我偷懶噢，親~~~

到此這篇關于Vue 如何使用props、emit實現自定義雙向綁定的實現的文章就介紹到這了,更多相關Vue props、emit實現自定義雙向綁定內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！