在vue中以组件的方式写一个自定义加载框

不多说先上效果图

 

• 加载框基本样式和逻辑 

• 使用方式

  在需要的地方引入组件，通过修改loading_show的值，控制加载框的显示和隐藏

•  组件

1. 组件注册

   • 全局注册: Vue.component('component-name',componentName)

   • 局部注册: 实例选项components注册

2. 数据传递：vue.js组件之间有三种数据传递方式

   • props

     • "props"是组件数据的一个字段，期望从父组件传下来的数据

     • props选项可以是字面量，也可以是表达式，还可以是绑定的修饰符【.sync ,双向绑定；.once,单次绑定】

     • prop验证type 的值:String、Number、Boolean、Object、Function、Array

     • 组件实例的作用域是孤立的，所以不应该在子组件的模板内直接引用父组件的数据，子组件需要显式的用props选项来获取父组件的数据

   • 组件通信

     • 子组件应当避免直接依赖父组件的数据，尽量显式的使用props传递数据

     • 事件传递的方式：

       • 监听事件$on()

       • 把事件沿着作用域链向上派送$emit()

       • 派发事件，事件验证父链冒泡$dispatch()

       • 广播事件，事件向下传导给所有后代$broadcast()

   • slot 分发内容