uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)

uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)

前言

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

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

问题

因为用的是 uniapp 开发小程序,所以要考虑到兼容性问题,不要把自己当正经VUE2。

小程序虽然支持 v-model 指令,但不支持 model 选项。

所以要么子组件中声明默认的 value 这个 props 来接收值。

要么手动:绑定属性事件

双向绑定示例

使用 v-model

由于小程序不支持 model 选项。

这个方案中:子组件里只能使用 value 接收数据,更新时触发 input

  • 父组件
html 复制代码
<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>
  • 子组件
html 复制代码
<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

html 复制代码
<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>
  • 子组件
html 复制代码
<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

  • 父组件
html 复制代码
<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>
  • 子组件
html 复制代码
<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>

参考资料

uniapp官方文档 :模板指令 v-model
uniapp官方文档 :.sync 修饰符

vue2官方文档:选项 model

相关推荐
春哥的研究所2 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck2 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场4 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld4 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json4 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
说私域7 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域11 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero17 小时前
微信小程序71~80
微信小程序·小程序
米粒宝的爸爸18 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz19 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app