前端组件化开发

一、前言开源组件库Element-UIiViewCDD组件优先的开发方式,组件驱动开发。自上而下从组件级别开始,到页面级别结束CDD的好处:组件在最大程度被重用并行开发可视化测试二、组件开发相关Vue知识点处理组件的边界情况$root:访问到Vue的根实例,操作根实例中的成员,可以在Vue根实例中存储共享数据,但还是推荐使用Vuex管理状态。parent/parent/parent/children:获取父组件/子组件,并操作其中成员。大多数情况下,不推荐使用。
摘要由CSDN通过智能技术生成

一、前言

开源组件库

  • Element-UI
  • iView

CDD

组件优先的开发方式,组件驱动开发。

  • 自上而下
  • 从组件级别开始,到页面级别结束

CDD的好处:

  • 组件在最大程度被重用
  • 并行开发
  • 可视化测试

二、组件开发相关Vue知识点

处理组件的边界情况

  • $root:访问到Vue的根实例,操作根实例中的成员,可以在Vue根实例中存储共享数据,但还是推荐使用Vuex管理状态。在这里插入图片描述
  • p a r e n t / parent/ parent/children:获取父组件/子组件,并操作其中成员。大多数情况下,不推荐使用。
    在这里插入图片描述
  • $refs:可以访问子组件
    在这里插入图片描述
  • 依赖注入 provide/inject
    在这里插入图片描述
  • a t t r s / attrs/ attrs/listeners
    • 把父组件中非prop属性绑定到内部组件
    • 把父组件中的DOM对象的原生事件绑定到内部组件
      在这里插入图片描述

三、快速原型开发

  • VueCli中提供了一个插件可以进行原型快速开发
  • 需要先额为安装一个全局的扩展
    npm install -g @vue/cli-service-global
  • 使用vue serve快速查看组件的运行效果

vue serve

  • vue serve如果不指定参数默认会在当前目录找以下的入口文件
    main.js、index.js、App.vue、app.vue
  • 可以指定哟啊加载的组件
    vue serve ./src/Login.vue

基于Element-UI组件开发

  • 初始化package.json
    npm init -y
  • 安装Element-UI
    vue add element
  • 加载Element-UI,使用Vue.use()安装插件

四、组件开发

组件分类

  • 第三方组件
  • 基础组件
  • 业务组件

组件开发-表单组件在这里插入图片描述

整体结构

  • Form
<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
   
  name: 'LgForm',
  provide() {
   
    return {
   
      form: this
    }
  },
  props: {
   
    model: {
   
      type: Object
    },
    rules: {
   
      type: Object
    }
  },
  methods: {
   
    validate(cb) {
   
      const tasks = this.$children
        .filter(child => child.prop)
        .map(child => child.validate())
      Promise.all(tasks)
        .then(() => cb(true))
        .catch(() => cb(false))
    }
  }
}
</script>

<style>
</style>
  • FormItem
<template>
  <div>
    <label>{
   {
    label }}</label>
    <div>
      <slot></slot>
      <p v-if="errMessage">{
   {
    errMessage }}</p>
    </div>
  </div>
</template
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值