uni-app 微信小程序中自定义组件model不生效，APP中是正常的

uni-app 微信小程序中自定义组件model不生效，APP中是正常的

示例代码：

model:{  
    prop: 'options',  
    event: 'change'  
},

操作步骤：

自定义组件中model定义成如下代码，并在微信小程序端运行

model:{  
    prop: 'options',  
    event: 'change'  
},

预期结果：

期望在微信小程序端自定义组件可以自定义model

实际结果：

自定义组件中自定义model,微信小程序不生效

bug描述：

自定义组件中使用model，将model的options作为prop,change作为event，代码编译在小程序端不生效，APP端正常


更多关于uni-app 微信小程序中自定义组件model不生效，APP中是正常的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序中自定义组件model不生效，APP中是正常的的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，微信小程序平台对自定义组件的 model 配置支持存在限制。微信小程序原生机制中，自定义组件的 v-model 默认仅支持 value 属性和 input 事件，而 uni-app 的 model 配置在其他平台（如 APP）可以正常映射，但在微信小程序中会被忽略。

解决方案：

  1. 放弃使用 model 配置，改为显式声明属性和事件：

    • 在自定义组件中定义 options 属性，并触发 change 事件。
    • 父组件通过 v-bind:options 和 v-on:change 手动绑定数据。

  2. 利用微信小程序原生 v-model：

    • 将属性名改为 value，事件名改为 input，即可直接使用 v-model。

示例调整：

// 自定义组件
export default {
  props: ['value'], // 改用 value
  methods: {
    updateValue(newVal) {
      this.$emit('input', newVal); // 触发 input 事件
    }
  }
}
回到顶部