溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.input 輸入框 v-model 綁定的字段名需要根據后臺返回的數據動態生成，此時就不可以用 v-model綁定，而是用傳統的方法 value 動態綁定，并且用子組件綁定向父組件傳遞值和事件。 代碼如下：
//子組件
<template>
<input v-if="type === 0" type="text" :value="currentValue" @change="handleInput">
<textarea v-else :value="currentValue" @change="handleInput"></textarea>
</template>
<script>
export default {
// 接收父組件傳遞過來的狀態（值）
props: {
type: Number, //0 input框 1 文本域
value: String // 值有時候編輯狀態也是先要獲取值的 類似 v-model
},
data() {
return {
currentValue: this.value
}
},
methods: {
handleInput(e) {
let value = e.target.value
if (value === this.currentValue) {
return
} else {
this.currentValue = value
}
this.$emit('input', value)
}
}
}
</script>
//父組件 //extendTypes 動態獲取過來的擴展字段 需要綁定的model 為item.extendKey <div class="form-group" v-for="item in extendTypes"> <div> <ad-input :value="extendTypesModel[item.extendKey]" :type="item.type" @input="handleUpdate(item.extendKey, $event)"> </ad-input> </div> </div>
// model是動態的，不可以寫死，只能在本地先定義一個json extendTypesModel，在獲取過來后臺的數據之后，本地賦值為空
this.extendTypesModel = {}
if (res && res.code === 0) {
for (let i = 0; i < res.data.length; i++) {
this.extendTypesModel[res.data[i].extendKey] = ''
}
this.extendTypes = res.data
}
//父組件注冊的事件
handleUpdate(key, value) {
this.extendTypesModel[key] = value
}
父子組件通過自定義屬性和自定義事件實現通信。
父組件 自定義屬性 v-bind 將父的值傳給子
子組件通過 props 來接受 父的值，接受后 可以想data 一樣直接拿來使用。
子組件內部 通過 $.emit( 父組件方法名，value) 方法向父組件傳值,父組件拿到值 并觸發父組件的事件了。
這種方式現在看來是個坑啊 因為子組件對數據會有個緩存，每次不是新生成一個 input框，而是看之前有沒有生成過，有的話就不生成了，所以數據有個緩存，清除不了 簡直換個更簡單的方式
<div class="form-group" v-for="(item, index) in extendTypes">
<label class="control-label">{{item.extendName}}</label>
// 既不需要用v-model綁定 也不需要用到子組件 將賦值和取值分開來 而不是用 v-model去綁定，這里取值用到 ref
<input class="form-control" :value="extendTypesModel[item.extendKey]" @input="handleUpdate(item.extendKey, index)" ref="ipt">
</div>
<div class="text-danger" v-if="item.isRequired === 1">*</div>
</div>
handleUpdate(key, index) {
this.extendTypesModel[key] = this.$refs.ipt[index].value
}
ref綁值取值ref給元素或者子組件注冊引用信息，綁定在this.ref綁值取值ref給元素或者子組件注冊引用信息，綁定在this.refs 上邊。如果是v-for 遍歷的話，綁定的就是個數組。
一般通過 $ref.name.value 來取值
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
