uniapp 微信小程序：v-model双向绑定问题（自定义 props 名无效）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序：v-model双向绑定问题（自定义 props 名无效）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

VUE中父子组件传递数据的基本套路：

父传子 props
子传父 this.$emit('事件名', '数据');
使用 sync 修饰符，实现支持同步数据

问题

uniapp 微信小程序：v-model双向绑定问题（自定义 props 名无效）,# uni-app,WeChat微信,uni-app,小程序,v-model
因为用的是 uniapp 开发小程序，所以要考虑到兼容性问题，不要把自己当正经VUE2。
小程序虽然支持 v-model 指令，但不支持 model 选项。
所以要么子组件中声明默认的 value 这个 props 来接收值。
要么手动：绑定属性和事件

双向绑定示例

使用 v-model

由于小程序不支持 model 选项。
这个方案中：子组件里只能使用 value 接收数据，更新时触发 input。

父组件

<template>
	<view>
		<view><text>父组件：{{ msg }}</text></view>
		<vmodel-component v-model="msg"></vmodel-component>
	</view>
</template>

<script>
	export default {
		data() {
			return { msg: '大家好，我是：使用 v-model' }
		},
		methods: {}
	}
</script>

<style>
</style>

子组件

<template>
	<view> 
		<view> 子组件：{{value}}  </view>
		<button @click="onclick" >更新</button>
	</view>
</template>

<script>
	export default {
		data() {return {};},
		props:{
			value:{ type: String, default: "未收到父值" }
		},
		methods:{
			onclick(e){
				this.$emit('input', '我是笨笨'); // v-mode 
			}
		}
	}
</script>

<style>
</style>

使用 v-bind + v-on

当然一般都会用简写形式：
v-bind:缩写为 :
v-on:缩写为 @

由于是自己手绑定，props 和 事件名都可以自己定。
比如在子组件中我就用 msg 接收数据。
事件我自己取名叫 customEvent。

<template>
	<view>
		<view><text>父组件：{{ msg }}</text></view>
		<novmodel-component :msg="msg" @customEvent="e => msg = e"></novmodel-component>
		<!-- <novmodel-component :msg="msg" @input=" msg = $event "></novmodel-component> -->
	</view>
</template>

<script>
	export default {
		data() {
			return { msg: '大家好，我是：不使用 v-model' }
		},
		methods: {}
	}
</script>

<style>
</style>

子组件

<template>
	<view> 
		<view> 子组件：{{msg}}  </view>
		<button @click="this.$emit('customEvent', '我是笨笨')" >更新</button>
	</view>
</template>

<script>
	export default {
		data() {return {};},
		props:{
			msg:{ type: String, default: "未收到父值" }
		},
		methods:{}
	}
</script>

<style>
</style>

使用 sync 修饰符

使用 sync 时可以自己决定绑到子组件的哪个 props 上，比如就绑到了 msg 上。
同步数据时触发 update:要更新的props

父组件

<template>
	<view>
		<view><text>父组件：{{ msg }}</text></view>
		<sync-component :msg.sync="msg"></sync-component>
	</view>
</template>

<script>
	export default {
		data() {
			return { msg: '大家好，我是：使用 sync 修饰符，实现同步数据' }
		},
		methods: {}
	}
</script>

<style>
</style>

子组件

<template>
	<view> 
		<view> 子组件：{{msg}}  </view>
		<button @click="$emit('update:msg', '我是笨笨')" >更新</button>
	</view>
</template>

<script>
	export default {
		data() {return {};},
		props: {
			msg: { type: String, default: "未收到父值" }
		},
		methods:{}
	}
</script>

<style>
</style>