uni-app 暴力解决双向绑定数据问题

用 uni-app 开发小程序的时候发现 Vue 的 v-model 特性 uni-app 并不支持(吐槽…)

网上看了大部分都是下面一种

<template>
    <view>
        <input type="text" :value="value" @input="inputChange" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value:'内容'
            }
        },
        methods: {
            inputChange(e){
                this.value = e.detail.value
            }
        }
    }
</script>

能用是能用,但是不必要为每个表单都绑定inputChange

为此自定义了一种方式

<template>
    <view>
        <input type="text" :value="value" @input="inputChange('value', $event))" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value:'内容'
            }
        },
        methods: {
            inputChange(key, e){
               this.$data[key] = e.detail.value
            }
        }
    }
</script>

上面的代码是可以运行的

还好 uni-app 还是支持 mixin 的

封装一下

mixin.js

export const mixin={
    methods: {
        inputChange(key, e){
            this.$data[key] = e.detail.value
        }
    }
}

index.vue

<template>
    <view>
        <input type="text" :value="value" @input="inputChange" />
    </view>
</template>

<script>
    import {mixin} from "../../mixin"
    export default {
        mixins:[mixin],
        data() {
            return {
                value:'内容'
            }
        }
    }
</script>