【已解决】自定义组件模式下，自定义组件的v-model属性可传入组件，但不能接受组件的表单变化数据

详细问题描述

 自定义组件模式下，自定义组件A，给A组件添加表单绑定操作，B页面使用A组件并通过v-model属性可传入value到组件，此时value的初始值可以传入A组件，但不能接受组件的表单变化数据，自定义组件模式下H5是OK的，APP和小程序有问题，模板模式下小程序、APP和H5都是OK的  
**特别说明：使用value和change绑定替换v-model可以正常工作（即使在自定义组件模式下）**  

[内容]

重现步骤

[步骤]
见详细问题描述

[结果]
不能正常接收表单变化的数据

[期望]
能接收表单变化的数据

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号]
HBuilder X 1.9.4

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序？]
自定义组件模式下H5是OK的，APP和小程序有问题，模板模式下小程序、APP和H5都是OK的

[运行端版本号]
小程序为例：调试基础库是2.6.4

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式？]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

A组件：w-search-bar.vue

<template>

<view>

<view class="cu-bar search shadow fixed" :class="bgColor">

<view class="search-form round" :class="searching ? 'justify-start': 'justify-center'">

<view class="flex-row align-center" :class="searching ? 'flex-1': ''">

<view class="cuicon cu-icon-search is-size-16"></view>

**<input v-if="value != null" class="is-size-14" type="text" :placeholder="placeholder" confirm-type="search" @focus="onFocus"

value="value" @input="$emit('change', $event.target.value)"></input>** <input v-else class="is-size-14" type="text" :placeholder="placeholder" confirm-type="search" @focus="onFocus"
v-model="key"></input>
</view>
<view v-if="showDel" class="cuicon cu-icon-roundclose is-size-17 has-mglr-5 has-pdlr-5" @click="onClear"></view>
</view>
<view v-if="searching" class="action">
<button v-if="value != null" class="cu-btn round has-pdlr-5" :class="bgColor" @click="onCancel">取消</button>
<button v-else-if="key" class="cu-btn round has-pdlr-5" :class="bgColor" @click="$emit('search', key)">搜索</button>
<button v-else class="cu-btn round has-pdlr-5" :class="bgColor" @click="onCancel">取消</button>
</view>
</view>
</view>
</template>

<script>
export default {
name: "w-search-bar",
model: {
prop: 'value',
event: 'change'
},
props: {
bgColor: {
type: String,
default: 'bg-white'
},
value: {
type: String,
default: null
},
placeholder: {
type: String,
default: '请输入检索内容'
}
},

    data() {  
        return {  
            key: '',  
            searching: false  
        }  
    },  

    computed: {  
        showDel: function() {  
            return this.searching && (this.value || this.key);  
        }  
    },  

    methods: {  
        onFocus() {  
            this.searching = true;  
        },  

        onClear() {  
            if(this.value != null) {  
                this.$emit('change', '');  
            } else {  
                this.key = '';  
                this.$emit('search', '');  
            }  
        },  

        onCancel() {  
            this.searching = false;  
            this.onClear();  
        },  
    }  
}  

</script>

B页面：w-issue.vue
<template>
<view>
<w-search-bar v-model="key"></w-search-bar>
</view>
</template>

<script>
import wSearchBar from "../../../components/bar/searchbar/w-search-bar.vue";

export default {  
    components: {  
        wSearchBar  
    },  

    data() {  
        return {  
            key: ''  
        };  
    }  
}  

</script>

通过观察appdata发现输入的数据并没有被实时反映到key上，可以通过日志可以断定change事件真实发出来了，如果不使用v-model而通过value和change绑定则可以工作
<w-search-bar :value="key" @change="onChange"></w-search-bar>

联系方式

[QQ]
409714243@qq.com