Question

我使用this instructions以编程方式创建Vue实例。我使用它来按用户事件动态添加项目中的组件实例。我现在的问题是，我的初始化组件需要一个模型。我经常会这样使用它：

<my-component v-model="variable"/>

但现在我在另一个组件方法部分中使用此代码片段创建此组件：

import MyComponent from '../MyComponent'

...

add () {
  const Component = Vue.extend(MyComponent)
  const instance = new Component()
  instance.$mount()
  document.getElementById('app').appendChild(instance.$el)
}

我知道在这里使用$ref更好，但它必须全局工作，所以我不知道如何将其添加到DOM中。但就像旁注一样现在我需要给这个instance v-model绑定。我已经知道如何定义道具或插槽，但不知道模型。在官方docu中，他们提到了一些事情。但说实话，我不理解它并且没有让它发挥作用任何人都可以告诉我如何扩展我的代码来定义这个实例的模型？像instance.$model = this.variable这样的东西会很棒。谢谢你！

Answer 1

最后我得到了一些解决方法。我不知道是否有更好的解决方案，但这对我有用。

MyComponent使用this description来处理v-model。这样就会为父组件发出change事件。因此，想法只是将模型变量作为属性传递，在MyComponent上对此变量的副本进行操作，并向父变量发出更改。要捕获此更改事件，我可以向我的实例添加以下内容：

  const Component = Vue.extend(EditWindow)
  const instance = new Component({
    propsData: { content: this.variable }
  })

  instance.$on('change', value => {
    this.variable = value
  })

  instance.$mount()
  document.getElementById('app').appendChild(instance.$el)

我猜这与Vue在后台实际上做的很相似（也许？）。但毕竟它有效，我很高兴。因为我打开了正确的＆＃39;解决方案，如果存在这样的话。

Vue V-Bind以编程方式创建实例

1 个答案: