Vue组件化开发实战之开发简易elementUI中Form表单组件

写入Input.vue组件，即实现v-model语法糖和传入type类型可改变input类型

先理解插槽，即一个组件中加入slot后，可以在使用这个组件时加入自定义内容

定义一个插槽

使用这个插槽组件，具名的插槽所占的位置会被同名template模板中的内容替换

FormItem组件中写入内容，插槽处可以插入input标签

 Form组件中写入

这样我们就可以使用了 

    
      
        
      
      
        
      
      {{ruleForm}}
    

Form组件需要传入模型数据和校验规则

FormItem组件需要传入标签名和单个校验规则

Input组件需要传入显示的value值和input类型

组件设计中常用到的provide和inject

祖先组件往下传值
provide () {
    return {
      name: '这是祖先组件的名字'
    }
  }


后代组件接值，类似于props
inject: ['name']

也可以传整个组件实例

provide () {
    return {
      form: this
    }
  }


this表示整个form组件实例
后代组件可以通过form.数据获取到所有数据

需要校验input中的value是否符合校验项，使用在子组件中使用父组件派发事件，在父组件中监听自己派发的事件

this.$parent.$emit()方法

input组件