1.input组件：
🌵：这里需要了解的是，v-model是v-bind:vlue 和 v-on:input的语法糖🍬
//src/components/Input.vue
<template>
<div>
<!-- v-model是v-bind:vlue 和 v-on:input -->
<input :type="type" :value="inputVal" @input="handleInput"/>
</div>
</template>
<script>
export default {
props:{
type:{ //对传入的type值做设置
type:String,
default:"lovelin"
},
value:{ //对传入的value值做设置
type:String,
default:""
}
},
data() {
return {
inputVal:this.value
}
},
methods: {
handleInput(e){
//赋值和实现双向数据绑定
this.inputVal = e.target.value;
this.$emit("input",this.inputVal);
//通知父组件值的更新(未完待续🎏)
},
},
}
</script>
<style scoped>
</style>
this.$emit("input",this.inputVal);这个是需要注意的地方，这个通知的是外层的（下面父组件中v-model中的input事件，并将this.inputVal传递出去）
2.外层的Form组件中使用上面的的input组件
<template>
<div>
<!--这是我们自己的input组件-->
{{ruleForm}}
<!--当改变输入框内的值的时候就能让上面{{}}中的ruleForm跟着一起变化-->
<m-input type="age" v-model="ruleForm.age"></m-input>
<m-input type="password" v-model="ruleForm.pass"></m-input>
</div>
</template>
<script>
import MInput from "./Input";
export default {
components:{
MInput
},
data() {
return {
ruleForm: {
pass: '920920',
checkPass: '',
age: '18岁'
},
};
},
methods: {
}
}
</script>
目录结构如下：
