原理
- [当前组件]通过[props传值方式]把[当前model对应变量值]传给[第三方组件对应props]。
- [第三方组件]在[第三方组件对应props]变动后,进行如更新[第三方组件内部变量值]相关的事件。
- [第三方组件]在更新[第三方组件内部变量值]之后,通过触发[第三方组件model更新事件]用[this.$emit]把[第三方组件内部变量值]传给[当前组件]。
- [当前组件]在[第三方组件model更新事件]被触发后,把[当前model对应变量值]的值变动为[第三方组件内部变量值]。结束这个循环。
<template>
<div @click="handleClick()">
点击变动父组件中v-model所绑定的变量值
</div>
</template>
<script>
export default {
name: '当前组件名称',
model: {
prop: 'externalValue',
event: ['更新外部model值的内部自定义事件'],
},
props: {
externalValue: {
type: [String, Number],
default: () => {
let theDate = `外部model值对应的props默认值`
return theDate
},
},
},
data() {
return {
internalValue: '当前组件内部model值默认值',
}
},
watch: {
externalValue() {
if (this.internalValue !== this.externalValue) {
this.internalValue = this.externalValue
}
},
},
mounted() {
},
methods: {
handleUpExternalData(theValue) {
if (theValue !== this.externalValue) {
this.internalValue = theValue
let params = theValue
this.$emit('更新外部model值的内部自定义事件', params)
}
return this.internalValue
},
handleClick() {
console.log('子组件简写点击;')
let params = new Date().getTime()
this.handleUpExternalData(params)
},
},
}
</script>
说明
- 非侵入式是指想要用户上传一个数据,不必去改动DOM骨架。
- 由于用到了document,那么这些代码不能在非浏览器环境如node.js环境下使用。
- 由于该方法为异步方法,故而最好是在异步函数里使用。当然也可以在同步函数的最后一步里使用。
来源
- vue 中v-model原理及应用;
- vue的v-model原理简述;