组件通信

组件通信一般分为以下几种情况：

  • 父子组件通信
  • 兄弟组件通信
  • 跨多层级组件通信
  • 任意组件

对于以上每种情况都有多种方式去实现，接下来就来学习下如何实现。

父子通信

父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方式是最常用的父子通信实现办法。

当然我们还可以通过访问 $parent 、 $children 、$refs 对象来访问组件实例中的方法和数据。

兄弟组件通信

对于这种情况可以通过查找父组件中的子组件实现，也就是 this.$parent.$children，在 $children中可以通过组件 name 查询到需要的组件实例，然后进行通信。

跨多层级组件通信

对于这种情况可以使用 Vue 2.2 新增的 API provide / inject，虽然文档中不推荐直接使用在业务中，但是如果用得好的话还是很有用的。

假设有父组件 A，然后有一个跨多层级的子组件 B

  1. // 父组件 A
  2. export default {
  3.   provide: {
  4.     data: 1
  5.   }
  6. }
  7. // 子组件 B
  8. export default {
  9.   inject: ['data'],
  10.   mounted() {
  11.     // 无论跨几层都能获得父组件的 data 属性
  12.     console.log(this.data) // => 1
  13.   }
  14. }

另外也可以自定义dispatch、boardcast方法实现

  1. // dispatch 向上传递
  2. Vue.prototype.$dispatch = function (eventName, data) {
  3.   let parent = this.$parent
  4.   // 查找父元素
  5.   while (parent) {
  6.     if (parent) {
  7.       // 父元素用$emit触发
  8.       parent.$emit(eventName, data)
  9.       // 递归查找父元素
  10.       parent = parent.$parent
  11.     } else {
  12.       break
  13.     }
  14.   }
  15. };
  17. // boardcast 向下传递
  18. Vue.prototype.$boardcast = function (eventName, data) {
  19.   boardcast.call(this, eventName, data)
  20. };
  22. function boardcast(eventName, data) {
  23.   this.$children.forEach(child => {
  24.     // 子元素触发$emit
  25.     child.$emit(eventName, data)
  26.     if (child.$children.length) {
  27.       // 递归调用，通过call修改this指向 child
  28.       boardcast.call(child, eventName, data)
  29.     }
  30.   })
  31. }

任意组件通信

这种方式可以通过 Vuex 或者 Event Bus（事件总线） 解决，另外如果你不怕麻烦的话，可以使用这种方式解决上述所有的通信情况

  1. // Event Bus
  2. class Bus {
  3.   constructor() {
  4.     // {
  5.     //   eventName1:[fn1,fn2],
  6.     //   eventName2:[fn3,fn4],
  7.     // }
  8.     this.callbacks = {}
  9.   }
  10.   $on(name, fn) {
  11.     this.callbacks[name] = this.callbacks[name] || []
  12.     this.callbacks[name].push(fn)
  13.   }
  14.   $emit(name, args) {
  15.     if (this.callbacks[name]) {
  16.       // 存在 遍历所有callback
  17.       this.callbacks[name].forEach(cb => cb(args))
  18.     }
  19.   }
  20. }
  22. // 可以使用 Vue 替代 Bus 类，因为它已经实现了相应的功能
  23. Vue.prototype.$bus = new Bus()

插槽

匿名插槽

  1. // comp1
  2. <div>
  3.    <slot></slot>
  4. </div
  6. // parent
  7. <Comp2>
  8.    <div>默认插槽</div>
  9. </Comp2>

具名插槽

  1. // comp2
  2. <div>
  3.   <h3>
  4.     <slot></slot>
  5.   </h3>
  6.   <slot name="content"></slot>
  7. </div>
  9. // parent
  10. <Comp2>
  11.   <div>默认插槽</div>
  12.   <!-- slot="插槽名" -->
  13.   <template slot="content">content 插槽</template>
  14. </Comp2>

作用域插槽

  1. // comp3
  2. <div>
  3.   <h3>作用域插槽</h3>
  4.   <!-- 通过绑定指定作用域 -->
  5.   <slot :foo="foo"></slot>
  6. </div>
  8. // parent
  9. <Comp3>
  10.   <!-- slot-scope="作用域上下文" -->
  11.   <template slot-scope="ctx">来自子组件数据：{{ctx.foo}}</template>
  12. </Comp3>

Vue2.6.0新语法

Vue2.6.0 之后采用全新v-slot语法取代之前的slot、slot-scope

  1. <!-- 2.6.0 新语法 -->
  2. <!--
  3. 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
  4. 它取代了 slot 和 slot-scope属性。
  6. 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并
  7. 以 v-slot:name 的参数的形式提供其名称。
  9. 一个不带 name 的 <slot> 插槽会带有默认的名字“default”。
  11. 任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
  13. 推荐为所有的插槽使用完整的基于 <template v-slot:default> 的语法。
  14. -->
  15. <Comp1>默认插槽</Comp1>
  17. <Comp2>
  18.   <!-- 默认插槽用default -->
  19.   <template v-slot:default>默认插槽</template>
  21.   <!-- v-slot:插槽名 -->
  22.   <template v-slot:content>content 插槽</template>
  23. </Comp2>
  25. <Comp3>
  26.   <!-- v-slot:插槽名="作用域上下文" -->
  27.   <template v-slot:default="ctx">来自子组件数据：{{ctx.foo}}</template>
  28. </Comp3>

递归组件

  • 递归组件必须要有结束条件
  • name对递归组件时必要的（递归组件调用自己不需要注册，需要提供name）
  1. <template>
  2.   <div>
  3.     <Node :data="data"></Node>
  4.   </div>
  5. </template>
  7. <script>
  8. import Node from "./Node.vue";
  10. export default {
  11.   data() {
  12.     return {
  13.       data: {
  14.         id: "1",
  15.         title: "递归组件",
  16.         children: [
  17.           { id: "1-1", title: "使用方法" },
  18.           { id: "1-2", title: "注意事项" }
  19.         ]
  20.       }
  21.     };
  22.   },
  23.   components: {
  24.     Node
  25.   }
  26. };
  27. </script>
  30. // Node.vue
  31. <template>
  32.   <div>
  33.     <h3>{{data.title}}</h3>
  34.     <!-- 必须有结束条件，这里的 v-for 可以作为结束条件 -->
  35.     <Node v-for="d in data.children" :key="d.id" :data="d"></Node>
  36.   </div>
  37. </template>
  39. <script>
  40. export default {
  41.   name: "Node", // name对递归组件是必要的
  42.   props: {
  43.     data: {
  44.       type: Object,
  45.       require: true
  46.     }
  47.   }
  48. };
  49. </script>

v-model 和 .sync

v-model

  1. <!-- v-model是语法糖 -->
  2. <input v-model="username">
  4. <!-- 默认等效于下面这行 -->
  5. <input :value="username" @input="username = $event.target.value">
  7. <!-- v-model是语法糖 -->
  8. <input type="checkbox" v-model="check">
  10. <!-- 默认等效于下面这行-->
  11. <input type="checkbox" :checked="check" @change="check = $event.target.checked">

自定义 input 组件

  1. <template>
  2.   <input type="text" :value="value" @input="$emit('input', $event.target.value)">
  3. </template>
  5. <script>
  6. export default {
  7.   name: 'c-input',
  8.   // 默认，不需要写
  9.   // model: {
  10.   //   prop: 'value',
  11.   //   event: 'input'
  12.   // }
  13.   props: {
  14.     value: String
  15.   }
  16. }
  17. </script>
  19. <style>
  21. </style>

自定义 checkbox 组件

  1. <template>
  2.   <div>
  3.     <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'c-checkbox',
  10.   model: {
  11.     prop: 'checked',
  12.     event: 'change'
  13.   },
  14.   props: {
  15.     checked: Boolean
  16.   }
  17. }
  18. </script>
  20. <style>
  22. </style>

.sync

  1. <c-input-sync :value.sync="username"></c-input-sync>
  3. <c-input-sync :value="username" @update:value="username = $event"></c-input-sync>
  5. <!-- 这里绑定属性名称可以随意更改，update 相应的属性名也会变化 -->
  6. <c-input-sync :foo="username" @update:foo="username = $event"></c-input-sync>
  1. <template>
  2.   <input type="text" :value="value" @input="$emit('update:value', $event.target.value)" />
  3. </template>
  5. <script>
  6. export default {
  7.   name: 'c-input-sync',
  8.   props: {
  9.     value: String
  10.   }
  11. }
  12. </script>
  14. <style>
  16. </style>

自定义表单组件

Input

  • 双向绑定：@input、:valu
  • 派发校验事件

inheritAttrs：默认情况下父组件中不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上，通过设置 inheritAttrs: false，就不会绑定到根元素上。

attrs：这些属性会可以直接绑定到非根元素上。

  1. <c-input v-model="model.username" autocomplete="off" placeholder="输入用户名"></c-input>
  1. <template>
  2.   <div>
  3.     <input :value="value" @input="onInput" v-bind="$attrs">
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   inheritAttrs: false,
  10.   props: {
  11.     value: {
  12.       type: String,
  13.       default: ""
  14.     }
  15.   },
  16.   methods: {
  17.     onInput(e) {
  18.       this.$emit("input", e.target.value);
  19.       this.$parent.$emit("validate");
  20.     }
  21.   }
  22. };
  23. </script>
  25. <style lang="scss" scoped>
  26. </style>

FormItem

  • 给Input预留插槽 - slot
  • 能够展示label和校验信息
  • 能够进行校验
  1. <template>
  2.   <div>
  3.     <label v-if="label">{{label}}</label>
  4.     <slot></slot>
  5.     <p v-if="errorMessage">{{errorMessage}}</p>
  6.   </div>
  7. </template>
  9. <script>
  10. import Schema from "async-validator";
  11. export default {
  12.   // 接收数据
  13.   inject: ["form"],
  14.   props: {
  15.     label: {
  16.       type: String,
  17.       default: ""
  18.     },
  19.     prop: {
  20.       type: String
  21.     }
  22.   },
  23.   data() {
  24.     return {
  25.       errorMessage: ""
  26.     };
  27.   },
  28.   mounted() {
  29.     // 勘误
  30.     // this.$on("validate", this.validate);
  32.     // 上面的代码 返回的 rejected 状态的 promise 没有被catch捕获，控制台会报错
  33.     this.$on('validate', () => {
  34.       this.validate()
  35.     })
  36.   },
  37.   methods: {
  38.     validate() {
  39.       // 做校验
  40.       const value = this.form.model[this.prop];
  41.       const rules = this.form.rules[this.prop];
  42.       // npm i async-validator -S
  43.       const desc = { [this.prop]: rules };
  44.       const schema = new Schema(desc);
  45.       // return的是校验结果的Promise
  46.       return schema.validate({ [this.prop]: value }, errors => {
  47.         if (errors) {
  48.           this.errorMessage = errors[0].message;
  49.         } else {
  50.           this.errorMessage = "";
  51.         }
  52.       });
  53.     }
  54.   }
  55. };
  56. </script>
  58. <style lang="scss" scoped>
  59. </style>

Form

  • 给FormItem留插槽
  • 设置数据和校验规则
  • 全局校验
  1. <template>
  2.   <div>
  3.     <slot></slot>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   // 跨层级传递数据
  10.   provide() {
  11.     return {
  12.       form: this
  13.     };
  14.   },
  15.   props: {
  16.     model: {
  17.       type: Object,
  18.       required: true
  19.     },
  20.     rules: {
  21.       type: Object
  22.     }
  23.   },
  24.   methods: {
  25.     validate(cb) {
  26.       const tasks = this.$children
  27.         .filter(item => item.prop)
  28.         .map(item => item.validate());
  29.       // 所有任务都通过才算校验通过
  30.       Promise.all(tasks)
  31.         .then(() => cb(true))
  32.         .catch(() => cb(false));
  33.     }
  34.   }
  35. };
  36. </script>
  38. <style lang="scss" scoped>
  39. </style>

自定义弹框组件

弹框组件通常在当前 vue 实例之外独立存在，通常挂载于 body 上，通过 js 动态创建，不需要再任何组件中声明，可以使用单例模式，避免重复创建。

  • 组件实例创建函数：create函数
  1. import Vue from 'vue';
  3. // create.js 作用是把传递的组件配置（选项对象）转换为组件实例返回
  4. export default function create(Component, props) {
  5.   // 先创建Vue实例
  6.   const vm = new Vue({
  7.     // render 方法会调用 h 方法创建虚拟DOM
  8.     render(h) {
  9.       // h就是createElement，它返回 VNode
  10.       return h(Component, {
  11.         props
  12.       })
  13.     }
  14.   }).$mount(); 
  16.   // $mount里面会调render生成VNode，生成的VNode会执行update函数生成DOM
  18.   // $mount('body') 直接把 body 作为挂载元素会抛错
  20.   // 手动挂载: vm.$el是真实DOM
  21.   document.body.appendChild(vm.$el);
  23.   // 销毁方法 vm.$children vue实例下的 $children[0] | vm.$root 就是我们创建的组件实例
  24.   const comp = vm.$children[0];
  25.   comp.remove = function () {
  26.     document.body.removeChild(vm.$el);
  27.     vm.$destroy();
  28.   }
  29.   return comp;
  30. }

Notice 组件

  • 插槽预留
  • 标题、内容等属性
  • 自动关闭
  1. <template>
  2.   <div class="box" v-if="isShow">
  3.     <h3>{{title}}</h3>
  4.     <p class="box-content">{{message}}</p>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  10.   props: {
  11.     title: {
  12.       type: String,
  13.       default: ""
  14.     },
  15.     message: {
  16.       type: String,
  17.       default: ""
  18.     },
  19.     duration: {
  20.       type: Number,
  21.       default: 1000
  22.     }
  23.   },
  24.   data() {
  25.     return {
  26.       isShow: false
  27.     };
  28.   },
  29.   methods: {
  30.     show() {
  31.       this.isShow = true;
  32.       setTimeout(this.hide, this.duration);
  33.     },
  34.     hide() {
  35.       this.isShow = false;
  36.       this.remove();
  37.     }
  38.   }
  39. };
  40. </script>
  42. <style scoped>
  43. .box {
  44.   position: fixed;
  45.   width: 100%;
  46.   top: 16px;
  47.   left: 0;
  48.   text-align: center;
  49.   pointer-events: none;
  50. }
  51. .box-content {
  52.   width: 200px;
  53.   margin: 10px auto;
  54.   font-size: 14px;
  55.   border: blue 3px solid;
  56.   padding: 8px 16px;
  57.   background: #fff;
  58.   border-radius: 3px;
  59.   margin-bottom: 8px;
  60. }
  61. </style>
  • 使用
  1. <script>
  2. import Notice from "@/components/notice/KNotice";
  4. export default {
  5.   methods: {
  6.     submitForm(form) {
  7.       this.$refs[form].validate(valid => {
  8.         const notice = this.$create(Notice, {
  9.           title: "社会你杨哥喊你来搬砖",
  10.           message: valid ? "请求登录!" : "校验失败!",
  11.           duration: 1000
  12.         });
  13.         notice.show();
  14.       });
  15.     }
  16.   }
  17. };
  18. </script>

思考：使用单例模式处理弹框组件

  1. // 单例模式处理
  2. const create = (function(){
  3.   let comp;  
  4.   return function(Component, props){
  5.     if(!comp) {
  6.       const vm = new Vue({
  7.         render(h) {
  8.           return h(Component, {
  9.             props
  10.           })
  11.         }
  12.       }).$mount(); 
  13.       document.body.appendChild(vm.$el);
  14.       comp = vm.$children[0];
  15.       comp.remove = function () {
  16.         if (comp) {
  17.           document.body.removeChild(vm.$el);
  18.           vm.$destroy();
  19.         }
  20.         comp = null
  21.       }
  22.     }
  23.     return comp
  24.   }
  25. })()
  27. export default create

自定义Tree组件

  1. <template>
  2.   <li>
  3.     <div @click="toggle">
  4.       {{model.title}}
  5.       <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  6.     </div>
  7.     <ul v-show="open" v-if="isFolder">
  8.       <item 
  9.           class="item" 
  10.         v-for="model in model.children" 
  11.         :model="model" :key="model.title">
  12.           </item>
  13.     </ul>
  14.   </li>
  15. </template>
  17. <script>
  18. export default {
  19.   name: "item", // name对递归组件是必要的
  20.   props: {
  21.     model: {
  22.       type: Object,
  23.       required: true
  24.     }
  25.   },
  26.   data() {
  27.     return {
  28.       open: false
  29.     };
  30.   },
  31.   computed: {
  32.     // 递归组件必须要有结束条件
  33.     isFolder() {
  34.       return this.model.children && this.model.children.length;
  35.     }
  36.   },
  37.   methods: {
  38.     toggle() {
  39.       if (this.isFolder) {
  40.         this.open = !this.open;
  41.       }
  42.     }
  43.   }
  44. };
  45. </script>