分包A的页面A1引用分包B的组件B1，v-model在uni-app中有bug

分包A的页面A1引用分包B的组件B1，v-model在uni-app中有bug

开发环境 版本号 项目创建方式
Windows 1.0.0 CLI 
## 示例代码：

```html
<!-- 父组件 -->
<custom-component   
  v-model="showB1"   
>
</custom-component>  

// showB1: true  

// 子组件
close() {  
  this.$emit("input", false); // 父组件的showB1变成了event对象。如果子组件位于主包内，showB1则会变成false  
}

操作步骤：

如上

预期结果：

showB1为false

实际结果：

showB1为event对象

bug描述：

分包A的页面A1引用分包B的组件B1， A1： v-model=“showB1” B1：this.$emit(“input”, value) showB1没有变成true, 而是变成event对象。 如果组件B1位于主包内，则没有这个问题。


更多关于分包A的页面A1引用分包B的组件B1，v-model在uni-app中有bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

父组件先打印一下input事件啊

更多关于分包A的页面A1引用分包B的组件B1，v-model在uni-app中有bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个uni-app跨分包使用v-model时的事件传递问题。当子组件位于不同分包时，v-model的事件传递机制会出现异常。

问题原因：

  1. uni-app在跨分包通信时，事件对象会被重新包装
  2. 导致子组件emit的value值被包裹在event对象中

解决方案：

  1. 在子组件中使用this.$emit('input', false)时，改为：
close() {
  this.$emit('input', false, { bubbles: true })
}
  1. 或者在父组件中改用显式的value和input监听：
<custom-component 
  :value="showB1"
  @input="val => showB1 = val"
>
</custom-component>
  1. 临时方案：在父组件中处理event对象
methods: {
  handleInput(e) {
    this.showB1 = e.value || e // 兼容处理
  }
}
回到顶部