溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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 class="input" @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 class="option-list" v-show="!collapse">
<div class="option-item" 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實現自定義雙向綁定的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
