Vue编程式创建组件实例时的v-model绑定问题

嘿，我明白你现在遇到的问题了——动态创建组件的时候，没法像模板里那样直接用v-model="variable"绑定数据对吧？其实核心是要搞懂v-model的本质：它只是prop传递 + 事件监听的语法糖，我们只要手动实现这两步，就能在动态创建的组件上复刻v-model的效果。

针对Vue 2的实现方式 #

在Vue 2里，自定义组件的v-model默认对应value prop和input事件。我们可以在动态创建组件时，手动传入value并监听input事件来同步数据：

import Vue from 'vue'
import MyComponent from '../MyComponent'

export default {
  data() {
    return {
      variable: '' // 你要绑定的数据源
    }
  },
  methods: {
    add() {
      // 用Vue.extend创建组件构造器
      const ComponentConstructor = Vue.extend(MyComponent)
      // 实例化组件时传入propsData，把当前variable作为value传入
      const componentInstance = new ComponentConstructor({
        propsData: {
          value: this.variable
        }
      })
      
      // 监听组件的input事件，更新父组件的variable
      componentInstance.$on('input', (newValue) => {
        this.variable = newValue
      })
      
      // 挂载组件（可以挂载到指定容器，这里示例挂载到body）
      componentInstance.$mount()
      // 如果要挂载到当前组件内的容器，建议用ref获取DOM节点
      // this.$refs.componentContainer.appendChild(componentInstance.$el)
      document.body.appendChild(componentInstance.$el)
    }
  }
}

针对Vue 3的实现方式 #

Vue 3里废弃了Vue.extend，改用createApp来创建组件实例，同时v-model的默认规则变成了modelValue prop和update:modelValue事件，代码调整如下：

import { createApp } from 'vue'
import MyComponent from '../MyComponent.vue'

export default {
  data() {
    return {
      variable: ''
    }
  },
  methods: {
    add() {
      // 创建组件实例时，直接传入props和事件监听
      const app = createApp(MyComponent, {
        modelValue: this.variable,
        // 监听update:modelValue事件，同步数据
        'onUpdate:modelValue': (newValue) => {
          this.variable = newValue
        }
      })
      
      // 挂载到临时DOM节点，再添加到目标容器
      const componentInstance = app.mount(document.createElement('div'))
      document.body.appendChild(componentInstance.$el)
    }
  }
}

特殊情况：自定义v-model的组件 #

如果你的MyComponent自定义了v-model的prop和事件（比如Vue 2里的model选项，或者Vue 3里的v-model:xxx），只要对应调整传入的prop名称和监听的事件名就行：

比如Vue 2中组件自定义了v-model：

// MyComponent.vue
export default {
  model: {
    prop: 'myValue',
    event: 'myInput'
  },
  props: ['myValue']
}

那动态创建时就要改成：

const componentInstance = new ComponentConstructor({
  propsData: {
    myValue: this.variable
  }
})
componentInstance.$on('myInput', (newValue) => {
  this.variable = newValue
})

小提示 #

尽量不要直接挂载到document.body，建议在当前组件模板里加一个容器（比如<div ref="componentContainer"></div>），然后通过this.$refs.componentContainer获取DOM节点来挂载，这样组件销毁时更容易清理，避免内存泄漏。

内容的提问来源于stack exchange，提问作者weilbith