uniapp - v-modal

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