欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue组件化实战

程序员文章站 2022-04-10 16:36:12
注意:$children不能保证⼦元素顺序和$refs有什么区别?...

组件化

vue组件系统提供了⼀种抽象,让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤,任意类型的应⽤界
⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率,⽅便重复使⽤,简化调试步骤,提升项⽬可维护
性,便于多⼈协同开发。

组件通信常⽤⽅式

  • props (父子之间传递)
  • $emit/$on (子父之前传递)
  • event bus (可以用作兄弟之间的传递)
  • vuex (将状态放到统一地方维护)

边界情况
($parent $children $root业务中不推荐,会存在很强的耦合性)

  • $parent

  • $children

  • $root

  • $refs

  • provide/inject

  • 非prop特性

    • $attrs
    • $listeners

组件通信

props

父组件给子组件传值

// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>

子组件给父组件传值

// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>

事件总线(event bus)

任意两个组件之间传值常用事件总线或者vuex的方式

// 事件派发 监听和回调管理
class Bus {
  constructor() {
    this.callbacks = {}
  }
  $on (name, fn) {
    this.callbacks[name] = this.callbacks[name] || []
    this.callbacks[name].push(fn)
  }
  $emit (name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach(cb => cb(args))
    }
  }
}

// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handleClick)
// child2
this.$bus.$emit('foo')

vuex

创建唯⼀的全局数据管理者store,通过它管理数据并通知组件状态变更。

$parent/$root

兄弟组件之间通信可通过共同祖辈搭桥进行传参,$parent或$root。

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

$children

⽗组件可以通过$children访问⼦组件实现⽗⼦通信。

// parent
this.$children[0].xx = 'xxx'

注意:$children不能保证⼦元素顺序

$attrs/$listeners

包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当⼀个组件没有
声明任何 prop 时,这⾥会包含所有⽗作⽤域的绑定 ( class 和 style 除外),并且可以通过 v-bind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。

// child:并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

refs

获取⼦节点引⽤

// parent
<HelloWorld ref="com"/>
mounted() {
this.$refs.com.xx = 'xxx'
}

provide/inject

能够实现祖先和后代之间传值

// ancestor
provide() {
return {foo: 'foo'} }
// descendant
inject: ['foo']

插槽

插槽语法是Vue 实现的内容分发 API,⽤于复合组件开发。该技术在通⽤组件库开发中有⼤量应⽤。

匿名插槽
// comp1
<div> 
   <slot></slot>
</div>
// parent
<comp>hello</comp>
具名插槽

将内容分发到⼦组件指定位置

// comp2
<div> 
    <slot></slot>
    <slot name="content"></slot>
</div>
// parent
<Comp2>
<!-- 默认插槽⽤default做参数 -->
<template v-slot:default>具名插槽</template>
<!-- 具名插槽⽤插槽名做参数 -->
<template v-slot:content>内容...</template>
</Comp2>
作⽤域插槽

分发内容要⽤到⼦组件中的数据

// comp3
<div> 
    <slot :foo="foo"></slot>
</div>
// parent
<Comp3>
<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
<template v-slot:default="slotProps">
来⾃⼦组件数据:{{slotProps.foo}}
</template>
</Comp3>

组件化实战

通⽤表单组件

收集数据、校验数据并提交。

需求分析

  • 实现KForm
    • 指定数据model, 校验规则rules
    • 校验validate()
  • KFormItem
    • label标签添加: label
    • prop属性名称
    • 执行校验validate()
    • 显示错误信息
  • KInput
    -维护数据v-model
    -图标以及反馈信息

KInput 代码

创建components/form/KInput.vue
这里使用了$attrs 实现了非props属性的透传

<template>
  <div>
    <!-- 自定义组件双绑: value, @input -->
    <input :type="type" :value="value" @input="onInput" v-bind="$attrs">
  </div>
</template>

<script>
export default {
  name: 'KInput',
  inheritAttrs: false,
  props: {
    type: {
      type: String,
      default: 'text'
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  methods: {
    onInput (e) {
      this.$emit('input', e.target.value)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

使⽤KInput
创建components/form/index.vue,添加如下代码:

<template>
  <div>
    <KInput v-model="model.userName" placeholder="请输入用户名"/>
    <KInput v-model="model.password" type="password" placeholder="请输入用户密码"/>
    {{model.userName}}
  </div>
</template>

<script>
import KInput from './KInput'
export default {
  components: {
    KInput
  },
  data() {
    return {
      model: {
        userName: 'richard',
        password: ''
      }
    }
  },
};
</script>

<style lang="scss" scoped>
</style>

实现KFormItem

创建components/form/KFormItem.vue
这里需要使用到async-validator校验库

<template>
  <div>
    <!-- label标签 -->
    <label v-if="label">{{ label }}</label>
    <slot></slot>
    <!-- 错误信息 -->
    <p v-if="error" style="color: red">{{ error }}</p>
  </div>
</template>

<script>
import Validator from "async-validator";
export default {
  name: "KFromItem",
  inject: ["form"],
  props: {
    label: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      error: "",
    };
  },
  methods: {
    validate() {
      // 校验规则
      const rules = this.form.rules[this.prop];
      // 当前值
      const value = this.form.model[this.prop];
      // 创建一个校验器实例
      const validator = new Validator({ [this.prop]: rules });
      // 校验, 返回Promise
      return validator.validate({ [this.prop]: value}, errors => {
        if (errors) {
          this.error = errors[0].message
        } else {
          this.error = ''
        }
      })
    }
  },
  mounted() {
    this.$on("validate",  () => {
      this.validate();
    });
  },
};
</script>

<style lang="scss" scoped>
</style>

实现KForm

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  provide () {
    return {
      form: this
    }
  },
  name: 'KFrom',
  props: {
    model: {
      type: Object,
      required: true
    },
    rules: {
      type: Object
    }
  },
  data () {
    return {
    }
  },
  methods: {
    validate (cb) {
      // 检查所有的表单项目
      // 都需要校验通过
      // 获得一个promise数组
      // console.log(this.$children)
      // 必须拥有prop属性的formItem,才能留下
      const tasks = this.$children.filter(item => item.prop).map(itme => itme.validate())
      Promise.all(tasks).then(() => {
        cb(true)
      }).catch(() => {
        cb(false)
      })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

使⽤KForm

components/form/index.vue,添加基础代码:

<template>
  <div>
    <!-- KForm: 指定管理数据和校验规则 -->
    <!-- KFromItem 数据校验和错误的展示-->
    <KFrom :model="model" :rules="rules" ref="loginForm">
      <KFormItem label="用户名" prop="userName">
        <KInput v-model="model.userName" placeholder="请输入用户名"/>
      </KFormItem>
      <KFormItem label="用户密码" prop="password">
         <KInput v-model="model.password" type="password" placeholder="请输入用户密码"/>
      </KFormItem>
      <KFormItem>
         <button @click="handelLogin">登录</button>
      </KFormItem>
    </KFrom>
  </div>
</template>

<script>
import KInput from './KInput'
import KFormItem from './KFromItem'
import KFrom from './KFrom'
export default {
  components: {
    KInput,
    KFormItem,
    KFrom
  },
  data() {
    return {
      model: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [{required: true, message: '请输入用户名'}],
        password: [{required: true, message: '请输入密码'}]
      }
    }
  },
  methods: {
    handelLogin () {
      this.$refs.loginForm.validate(isValid => {
        if(isValid) {
          console.log('校验成功')
        } else {
          console.log('校验失败')
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

数据校验

Input通知校验

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

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

methods: {
    validate() {
      // 校验规则
      const rules = this.form.rules[this.prop];
      // 当前值
      const value = this.form.model[this.prop];
      // 创建一个校验器实例
      const validator = new Validator({ [this.prop]: rules });
      // 校验, 返回Promise
      return validator.validate({ [this.prop]: value}, errors => {
        if (errors) {
          this.error = errors[0].message
        } else {
          this.error = ''
        }
      })
    }
  },

表单全局验证,为Form提供validate⽅法

methods: {
    validate (cb) {
      // 检查所有的表单项目
      // 都需要校验通过
      // 获得一个promise数组
      // console.log(this.$children)
      // 必须拥有prop属性的formItem,才能留下
      const tasks = this.$children.filter(item => item.prop).map(itme => itme.validate())
      Promise.all(tasks).then(() => {
        cb(true)
      }).catch(() => {
        cb(false)
      })
    }
  }

实现弹窗组件

弹窗这类组件的特点是它们在当前vue实例之外独⽴存在,通常挂载于body;它们是通过JS动态创建
的,不需要在任何组件中声明。常⻅使⽤姿势:

this.$create(Notice, {
	title: '这是一个弹框',
	message: '提示信息',
	duration: 1000
}).show();

create函数

import Vue from 'vue'
// Component - 组件配置对象
// props - 传递给他的属性
function create (Component, props) {
  // 构建Component的实例
  const vm = new Vue({
    render (h) {
      // h 是createElement
      // 可以返回一个vnode
      return h(Component, {props})
    }
  }).$mount() // 不设置挂载目标,依然可以转换vnode为真实节点
  // 2.挂载到body上
  document.body.appendChild(vm.$el)
  // 3.获取组件实例
  const comp = vm.$children[0]

  comp.remove = () => {
    document.body.removeChild(vm.$el)
    // 释放相关内存资源占用
    vm.$destroy()
  }
  return comp
}

export default create

通知组件

建通知组件,Notice.vue

<template>
  <div class="box" v-if="isShow">
    <h3>{{title}}</h3>
    <p class="box-content">{{message}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    message: {
      type: String,
      default: ""
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    show() {
      this.isShow = true;
      setTimeout(this.hide, this.duration);
    },
    hide() {
      this.isShow = false;
      this.remove();
    }
  }
};
</script>

<style>
.box {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
  background-color: #fff;
  border: grey 3px solid;
  box-sizing: border-box;
}
.box-content {
  width: 200px;
  margin: 10px auto;
  font-size: 14px;  
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  margin-bottom: 8px;
}
</style>

使⽤create api

测试,components/form/index.vue
引入: create方法, 以及Notice(通知组件)组件

handelLogin () {
      this.$refs.loginForm.validate(isValid => {
        create1(c, {
          title: '这是一个弹框',
          message: isValid ? '请求登录' : '校验失败'
        }).show()
        // if(isValid) {
        //   console.log('校验成功')
        // } else {
        //   console.log('校验失败')
        // }
      })
    }
}

本文地址:https://blog.csdn.net/weixin_44385915/article/details/109272050