<e-input v-model="ruleForm.pwd"></e-input>
</e-form-item>
<div>
{{ ruleForm }}
</div>
</div>
</template>
<script>
import EInput from './components/Input.vue';
import EFormItem from './components/FormItem.vue';
export default {
name: "app",
components: {
EInput,
EFormItem
},
data() {
return {
ruleForm: {
name: '',
pwd: '',
},
};
},
};
</script>
3. Form 的设计
到现在，我们已经完成了最内部的
input 以及中间层的
FormItem 的设计，现在我们开始设计最外层的
Form 组件。当层级过多并且组件间需要进行数据传递时，Vue 为我们提供了
provide 和
inject API，方便我们跨层级传递数据。我们举个例子来简单实现一下
provide 和
inject 。在 App.vue 中，我们提供数据(provide)。
export default {
name: "app",
provide() {
return {
msg: '哥是最外层提供的数据'
}
}
};
</script>接着，我们在最内层的 Input.vue 中注入数据，观察结果。
<template>
<div>
<!-- 1、绑定 value
2、响应 input 事件-->
<input type="text" :value="valueInInput" @input="handleInput">
<div>{{ msg }}</div>
</div>
</template><script>
export default {
name: "EInput",
inject: [ 'msg' ],
props: {
value: {
type: String,
default: '',
}
},
data() {
return {
valueInInput: this.value
};
},
methods: {
handleInput(event) {
this.valueInInput = event.target.value;
this.$emit('input', this.valueInInput);
}
},
};
</script>
根据上图，我们可以看到无论跨越多少层级，
provide 和
inject 可以非常方便的实现数据的传递。理解了上面的知识点后，我们可以开始设计
Form 组件了。
<el-form :model="ruleForm" :rules="rules" ref="loginForm">
