Question

我有一个组件，它从我的应用程序中其他位置生成的表单中获取主<slot>。我尝试在表单输入上使用v-model，但我的vue组件只是发出一个关于未定义属性的警告，实际上它们是。

我承认这是一种奇怪的做事方式，但由于我的表格是由Symfony生成的，所以这似乎是我最简单的方法。

html：

<my-component>
  <input ref="start" v-model="start"/>
</my-component>

我的组件：

<script>
   export default {
     data() {
       start: null
     },
     mounted() {
       console.log(this.$refs) // === {}; expected {"start":{...}}
     }
   }
</script>
<template>
    <div>
        <slot/>
        ... other stuff here
    </div>
</template>

控制台日志：

Property or method "start" is not defined on the instance but referenced during render

我不能在html中使用$ refs或v-model。难道我做错了什么？或者这是不可能的。

Answer 1

如果您在父级中声明v-model="start"，那么它属于父级，需要在那里声明。看起来您在组件中将其声明为null。

如果您重新排序，它应该按预期工作：

父：

<parent>
  <input v-model="start" :start="start"/>
</parent>
<script>
 export default {
 data() {
   start: null // Important to define start here if it's used in this component's html
 }
}
</script>

组件：

<template>
  <div>
    <slot/>
    ... other stuff here
  </div>
</template>
<script>
 export default {
 props: ['start'], // Receive the prop from the parent
 data() {
 },
 mounted () {
   console.log(this.start) // Should echo the value of the prop from the parent
  }
}
</script>

在Vue2的插槽中使用v-model和refs

1 个答案: