【Vue】Vue核心API&&组件设计

此文项目代码：https://github.com/bei-yang/I-want-to-be-an-architect
码字不易，辛苦点个star，感谢！

引言

---

此篇文章主要涉及以下内容：

1. 实现一个购物车案例
2. 掌握vue核心API
3. 深入了解vue的组件化机制
4. 第三方组件库element-ui应用
5. 设计并实现表单组件

实现一个购物车案例

---

• 实现课程列表

• 购物车

组件化

---

• 组件化思想

  
  
  
• 第三方组件应用

1. Element-UI：https://element.eleme.cn/#/zh-CN
2. element集成：vue add element
3. 组件使用：创建一个登陆表单并可以校验用户输入

需要在element.js导入Form、FormItem和Input

import Vue from 'vue'
import { Button,Form,FormItem,Input } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

• 组件设计：实现Form、FormItem和Input

需要思考的几个问题？

1. Input是自定义组件，它是怎么实现双向绑定的？
2. FormItem是怎么知道执行校验的，它是怎么知道Input状态的？它是怎么获得对应数据模型的？
3. Form是怎么进行全局校验的？它用什么办法把数据模型和校验规则传递给内部组件？

设计思想

• 实现input

  • 任务1：实现自定义组件双向绑定功能

    v-model是语法糖，实现自定义组件双向数据绑定需要指定:value和@input即可

  • 任务2：值发生变化能够通知FormItem组件

• 实现FromItem
  • 任务1：给Input预留插槽——slot
    • 匿名插槽

    // 定义parent中插槽
    
    // 使用parent并指定插槽内容
    content
    

    • 具名插槽

    // 定义parent中插槽
    
    // 使用parent并指定插槽内容
    content
    

  • 任务2：能够展示label和校验信息
  • 任务3：能够进行校验

• 实现form
  • 给form-item预留槽位
  • 将数据传递给后代便于他们访问数据模型和校验规则
    • provide&&inject

• 数据校验
  • 思路：校验发生在FormItem，它需要知道何时校验（让input通知它），还需要知道怎么校验（注入校验规则）
  • 任务1：Input通知校验

  onInput(e){
    // ...
    // $parent指FormItem
    this.$parent.$emit('validate');
  }
  

  • 任务2：FormItem监听校验通知，获取规则并执行校验

  inject:['form'],  // 注入
  mounted(){   // 监听校验事件
    this.$on('validate',this.validate)
  },
  methods:{
    validate(){
      // 获取对应FormItem校验规则
      console.log(this.form.rules[this.prop]);
      // 获取校验值
      console.log(this.form.model[this.prop]);
    }
  }
  

  • 安装async-validator:npm i async-validator -S

  import schema from 'async-validator';
  validate(){
    // 获取对应FromItem校验规则
    const rules=this.form.rules[this.prop];
    // 获取校验值
    const value=this.form.model[this.prop];
    // 校验描述对象
    const descriptor={[this.prop]:rules};
    // 创建校验器
    const schema=new Schema(descriptor);
    schema.validate({[this.prop]:value},errors=>{
      if(errors){
        // 将错误信息显示
        this.error=error[0].message;
      }else{
        // 校验通过
        this.error='';
      }
    })
  }
  

你的赞是我前进的动力

求赞，求评论，求转发...