VUE组件实现-表单组件、Notice组件、Tree组件

表单组件实现

Input

1.双向绑定：@input、:value
2.派发校验事件

FormItem

1.给Input预留插槽 - slot
2.能够展示label和校验信息
3.能够进行校验

Form

1.给FormItem留插槽
2.设置数据和校验规则
3.全局校验

Notice组件实现

1.组件实例创建函数：create函数

import Vue from 'vue';
export default function create(Component, props) {
 // 先创建实例
   const vm = new Vue({
   render(h) {
     // h就是createElement，它返回VNode
     return h(Component, {props})
   }
 }).$mount();
 // 手动挂载
 document.body.appendChild(vm.$el);
 // 销毁方法
 const comp = vm.$children[0];
 comp.remove = function() {
   document.body.removeChild(vm.$el);
   vm.$destroy();
 }
 return comp;
}

2.Notice组件
(1)插槽预留
(2)标题、内容等属性
(3)自动关闭

3.使用

Tree组件实现

1.递归组件Item创建

2.数据和使用