在uniapp中,也許有人會糾結為什么會有@input還有v-model
1.它們有什么區別?
v-model:數據雙向綁定->輸入時綁定視圖層,而@input則只是監聽值
@input:監聽輸入的值,可以通過監聽值再渲染到視圖層
2. v-model用在自定義組件上
v-model的缺陷是只能在自定義組件上用一次,而這時的雙向綁定就要交由.sync語法糖來解決了
<template> <!-- 父組件index.vue --> <view class="content"> <onB v-model="hello" @valEvent="getValue"></onB> <input type="text" value="" v-model="hello" @input="hellos"/> {{hello}} </view> </template> <script> import onB from '@/components/onB.vue'; export default { data() { return { hello: '' } }, components:{ onB }, onLoad() {}, mounted() {}, methods: { hellos(e){ console.log(e.detail.value); }, getValue(e){ console.log('getValue:',e); } } } </script> <style> </style>
<template> <view @click="getValue"> <!-- onB.vue子組件 --> 子組件:{{val}} </view> </template> <script> export default { data() { return {} }, props: { val: String, default: '' }, model: { prop: 'val', event: 'valEvent' }, methods: { getValue(){ this.$emit('valEvent',this.val); } }, mounted() {} } </script> <style> </style>