vue中自定义输入字段中的双向绑定

Question

我在使用v-model vue指令进入自定义输入字段时遇到问题，以下是自定义输入组件和App.vue的代码。

这是我的自定义输入字段

Input.vue

<template>
    <label >{{label}}</label>
    <input v-model="bindTo" type='type'  required>
</template>

<script>
export default {
    props:['label','type','bindTo']
}
</script>

App.vue

<template>

    <!-- Email -->
        <Input type="email" label="Email" :bindTo="email"/>
        <p>Email : {{email}}</p>


</template>

<script>
import Input from "./Input.vue";

export default {
    components:{
        Input,
    },
data() {
    return {
        email:"",
        password:"",
        role:"developer",
        terms:false,
        tempSkill:"",
        skills:[],
        passwordError:"",
        emailError:"",
    }
},


</script>

在我的数据方法中，我无法访问电子邮件中的值。可能出什么事了？

Answer 1

仔细看完文档，我找到了解决问题的方法。

Input.vue

<template>
    <label >{{label}}</label>
    <input :value="modelValue" type='type' @input="$emit('update:modelValue',$event.target.value)"  required>
</template>

<script>
export default {
    props:['label','type','modelValue'],
    emits:['update:modelValue']
}
</script>

然后在App.vue

<template>

    <!-- Email -->
        <Input type="email" label="Email" v-model="email"/>
        <p>Email : {{email}}</p>


</template>

<script>
import Input from "./Input.vue";

export default {
    components:{
        Input,
    },
data() {
    return {
        email:"",
        password:"",
        role:"developer",
        terms:false,
        tempSkill:"",
        skills:[],
        passwordError:"",
        emailError:"",
    }
},


</script>

要了解更多细节，请访问文档，因为除了这种方法之外，还有其他方法可以使其工作，https://vuejs.org/guide/components/events.html

Answer 2

在Vue.js中，您只需添加v-bind="$attrs"和v-on="$listeners"，就可以将所有内容从父组件转发到子组件。

Input.vue

​

<template>
    <label >{{label}}</label>
    <input v-bind="$attrs" v-on="$listeners">
</template>

<script>
  export default {
    props: ['label']
  }
</script>

​

App.vue

​

<template>

    <!-- Email -->
        <Input type="email" label="Email" v-model="email" required/>
        <p>Email : {{email}}</p>


</template>

<script>
  import Input from "./Input.vue";

  export default {
    components: {
      Input,
    },
    data() {
      return {
        email: "",
        password: "",
        role: "developer",
        terms: false,
        tempSkill: "",
        skills: [],
        passwordError: "",
        emailError: "",
      }
    },
</script>

​