xiaojun617
xiaojun617
  • 发布:2020-08-07 09:45
  • 更新:2021-01-19 10:19
  • 阅读:3330

uni-app组件v-model在小程序上不支持对象属性绑定吗?

分类:uni-app

页面代码:

<template>  
    <view>  
        自定义组件输入框:  
        <mytest :obj="obj"></mytest>  
        {{ obj.name }}  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            obj: {  
                name: 'myname',  
            },  
        };  
    },  
};  
</script>

自定义组件的代码:

<template>  
    <view>  
        <input v-model="obj.name" />  
    </view>  
</template>  

<script>  
export default {  
    name: 'mytest',  
    props: {  
        obj: {  
            type: Object,  
            required: true,  
        },  
    },  
};  
</script>

input输入框输入内容,在h5上生效,在小程序不生效。请问这是不被支持还是bug?

2020-08-07 09:45 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

想在自定义组件实现 v-model 效果,并不是这样用的,Vue 中是单项数据流,不要直接修改 props 传入的内容,组件内想要修改组件外的数据,应该使用事件机制(可以使用 .sync 修饰符或 v-model 来简化)。
H5 上,虽然表面上“生效了”,但是用法是有问题的,这是Vue明确禁止的用法,并且被Vue框架观测到的话,会抛出相关错误。(相关文档:https://cn.vuejs.org/v2/guide/components-props.html)。
小程序上没有生效,是因为小程序上传入自定义组件内的数据并非原对象的引用,所以你修改这个对象,组件外的数据没有同时变化。

xiaojun617

xiaojun617 (作者)

明白了,是我的锅

xiaojun617

xiaojun617 (作者)

帖子不支持关闭吗?

该问题目前已经被锁定, 无法添加新回复