田心水原
田心水原
  • 发布:2019-05-14 16:16
  • 更新:2019-05-17 10:42
  • 阅读:2279

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

分类:uni-app

详细问题描述

 自定义组件模式下,自定义组件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

2019-05-14 16:16 负责人:无 分享
已邀请:
ZGH0709

ZGH0709

改成 input 试一下

model: {  
  prop: 'value',  
  event: 'input'  
},
  • 田心水原 (作者)

    换了input的确可以,但如果里面不是input事件类型的表单或者根本就没有表单也还是必须input吗,所以uniapp自定义组件模式下自定义v-model的规则是什么?


    2019-05-17 10:42

  • ZGH0709

    回复 田心水原: 目前只支持通过上面的形式


    2019-05-17 12:52

  • 田心水原 (作者)

    回复 ZGH0709: 好的,谢谢!


    2019-05-17 15:24

  • 田心水原 (作者)

    回复 ZGH0709: 还有一个问题是三天前一起提出的,请关注一下,谢谢:https://ask.dcloud.net.cn/question/70811


    2019-05-17 15:28

  • 桂丽莎白

    回复 田心水原: 没表单 就算是click 直接 $emit('input', data) 也可以传出去数据


    2020-06-16 17:57

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