2021-10-11 vue的v-model命令说明

原理

1. [当前组件]通过[props传值方式]把[当前model对应变量值]传给[第三方组件对应props]。
2. [第三方组件]在[第三方组件对应props]变动后，进行如更新[第三方组件内部变量值]相关的事件。
3. [第三方组件]在更新[第三方组件内部变量值]之后，通过触发[第三方组件model更新事件]用[this.$emit]把[第三方组件内部变量值]传给[当前组件]。
4. [当前组件]在[第三方组件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//如果传入的model值与内部this.internalValue不同时,强制统一;
      }
    },
    /* internalValue() {
      this.handleUpExternalData(this.internalValue)
    },
    */
  },
  mounted() {
    //this.handleClick()
  },
  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>

说明

1. 非侵入式是指想要用户上传一个数据，不必去改动DOM骨架。
2. 由于用到了document，那么这些代码不能在非浏览器环境如node.js环境下使用。
3. 由于该方法为异步方法，故而最好是在异步函数里使用。当然也可以在同步函数的最后一步里使用。

来源

1. vue 中v-model原理及应用;
2. vue的v-model原理简述;