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