无法通过模板在动态组件中引用 v-model 中的数据答案

【问题标题】：Can't reference to data in v-model in dynamic components via template无法通过模板在动态组件中引用 v-model 中的数据
【发布时间】：2021-02-23 13:42:17
【问题描述】：

我的 VueJ 和 HTML 代码如下：

我收到错误：

[Vue 警告]：属性或方法“tempdt”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

谁能指导我我犯了什么错误以及从动态组件引用数据的正确方法是什么？

const Comp = {
  template: '<div><select v-model="tempdt"><option>hi</option></select><input type="text"  :value="[[tempdt]]" ></input></div>'
}

new Vue({
  delimiters: ["[[", "]]"],
  el: "#app",

  data: {
    tempdt: '',
    components: [Comp]
  },

  methods: {
    add() {
      this.components.push(Comp)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="add">Add Component</button>
  <component v-for="(component, index) in components" :key="index" :is="component" />
</div>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

使用Vue.component 定义一个组件，将其命名为第一个参数，然后将该属性移至该组件。

Vue.component('my-comp', {
  data() {
    return {
      tempdt: '',
    }
  },
  template: '<div><select v-model="tempdt"><option>hi</option></select><input type="text"  :value="[[tempdt]]" ></input></div>'
})
new Vue({
  delimiters: ["[[", "]]"],
  el: "#app",

  data: {

    components: ["my-comp"]
  },

  methods: {
    add() {
      this.components.push(Comp)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="add">Add Component</button>
  <component v-for="(component, index) in components" :key="index" :is="component" />
</div>

【讨论】：