如果需要給自定義組件綁定多個v-model祝峻,此時需要用到sync修飾符京髓。
1斩启、App.vue中將age傳遞給MyInput.vue
<MyInput :name.sync='name' :age.sync='age' />
2饰迹、MyInput.vue
<template>
<div>
<h1>自定義input</h1>
<input type="text" :value="name" @input="(e)=>$emit('update:name',e.target.value)">
<p>{{name}}</p>
<input type="text" :value="age" @input="(e)=>$emit('update:age',e.target.value)">
<p>{{age}}</p>
</div>
</template>
<script>
export default {
props: ['name', 'age']
}
</script>
原文:https://www.cnblogs.com/wuqilang/p/14874774.html
如果用到了 uni-easyinput
<login-content :mobile.sync="mobile" :msg.sync="msg" :account.sync="account" :password.sync="password"></login-content>
data() {
return {
mobile: '176',
msg: '1234',
account: '111',
password: '234',
};
},
login-content
<view class="login-input-box" v-show="type == 'mobile'">
<uni-easyinput :value="mobile" @input="(e)=>$emit('update:mobile',e)"></uni-easyinput>
<uni-easyinput :value="msg" @input="(e)=>$emit('update:msg',e)"></uni-easyinput>
<uni-easyinput :value="account" @input="(e)=>$emit('update:account',e)"></uni-easyinput>
<uni-easyinput :value="password" @input="(e)=>$emit('update:password',e)"></uni-easyinput>
</view>
export default {
name: "login-content",
props: ['mobile', 'msg', 'account', 'password'],
}