uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)
·
uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)
前言
VUE中父子组件传递数据的基本套路:
- 父传子
props
- 子传父
this.$emit('事件名', '数据');
- 使用
sync
修饰符,实现支持同步数据
问题
因为用的是 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>
参考资料
更多推荐
已为社区贡献6条内容
所有评论(0)