vue中自定义输入字段中的两种方式绑定

Question

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

这是我的自定义输入字段

输入.vue

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

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

应用程序.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>

我无法在我的数据方法中访问 email 中的值。 可能有什么问题？

Answer 1

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

输入.vue

 <template> <label >{{label}}</label> <input v-bind="$attrs" v-on="$listeners"> </template> <script> export default { props: ['label'] } </script>

应用程序.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>

Answer 2

彻底浏览文档，我找到了有助于解决我的问题的解决方案

输入.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