vue组件化实战

组件化

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