uni-app 自定义组件设置支持v-model在小程序中无法双向绑定

uni-app 自定义组件设置支持v-model在小程序中无法双向绑定

示例代码：

子组件

<template>  
  <view>  
    <button @click="onClick">{{ value }}</button>  
  </view>  
</template>  

<script>  
export default {  
  name: '',  
  components: {},  
  props: {  
    value: {  
      type: Number,  
      default: 0,  
    },  
  },  
  model: {  
    prop: 'value',  
    event: 'change',  
  },  
  data() {  
    return {}  
  },  
  methods: {  
    onClick() {  
      let new_value = this.value + 1  
      this.$emit('change', new_value)  
    },  
  },  
}  
</script>  

<style scoped lang="scss"></style>

父组件

<template>  
  <view>  
    <demo v-model="number"></demo>  
    <view>{{ number }}</view>  
  </view>  
</template>  

<script>  
import demo from '../components/demo.vue'  
export default {  
  name: '',  
  components: {  
    demo,  
  },  
  data() {  
    return {  
      number: 1,  
    }  
  },  
  methods: {},  
}  
</script>  

<style scoped lang="scss"></style>

操作步骤：

父组件使用代码示例中的组件时 在小程序中value的值没有实现双向绑定效果

预期结果：

小程序中可以支持像h5中那样数据的双向绑定

实际结果：

小程序中不支持像h5中那样数据的双向绑定

bug描述：

自己定义的组件设置支持v-model但是小程序中无法双向绑定，h5中是可以的，如果是二次封装的input组件小程序和h5都正常，其他的小程序中无法双向绑定

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 windows10
第三方工具版本 1.05.2107221
基础库版本 2.19.2
项目创建方式 CLI
CLI版本 ^2.0.0-31920210709003

更多关于uni-app 自定义组件设置支持v-model在小程序中无法双向绑定的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

正式版本此问题有没有得到官方解决？

更多关于uni-app 自定义组件设置支持v-model在小程序中无法双向绑定的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在小程序中，自定义组件使用 v-model 双向绑定确实存在限制。这是因为小程序平台本身不支持自定义组件的双向绑定，而 H5 端基于 Vue 原生机制可以正常使用。

问题原因：

  1. 小程序自定义组件通信机制与 Vue 不同，其 model 选项在小程序中无效。
  2. 小程序中，父组件向子组件传递数据通过 properties（对应 Vue 的 props），子组件向父组件通信通过 triggerEvent（对应 Vue 的 $emit），但无法自动实现双向绑定。

解决方案： 使用 sync 修饰符替代 v-model：

子组件：

<template>
  <view>
    <button @click="onClick">{{ value }}</button>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    onClick() {
      let new_value = this.value + 1
      this.$emit('update:value', new_value)
    }
  }
}
</script>

父组件：

<template>
  <view>
    <demo :value.sync="number"></demo>
    <view>{{ number }}</view>
  </view>
</template>

<script>
import demo from '../components/demo.vue'
export default {
  components: { demo },
  data() {
    return {
      number: 1
    }
  }
}
</script>
回到顶部