Vue组件化

组件传值、通信

父->子

• 属性 props

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

• 引用 refs

  // parent
  <HelloWorld ref="hw"/>
  this.$refs.hw.xx = 'xxx'

• 子组件 children

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

子组件 => 父组件:自定义事件

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

兄弟组件:通过共同祖辈组件

通过共同的祖辈组件搭桥，$parent或$root。

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

祖先和后代之间

provide/inject:能够实现祖先给后代传值

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

任意两个组件之间:事件总线 或 vuex

• 事件总线:创建一个Bus类负责事件派发、监听和回调管理

  // Bus:事件派发、监听和回调管理
  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', handle)
  // child2
  this.$bus.$emit('foo')

• vuex:创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更

插槽

Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope

匿名插槽

// 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="ctx">
来自子组件数据:{{ctx.foo}} </template>
</Comp3>

组件通信补充

Vue 组件间通信有哪几种方式？

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。 -（1）props / $emit 适用 父子组件通信 这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。 -（2）ref 与 $parent / $children 适用 父子组件通信 ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 $parent / $children：访问父 / 子实例 -（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。 -（4）$attrs/$listeners 适用于 隔代组件通信 $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind=“$attrs” 传入内部组件。通常配合 inheritAttrs 选项一起使用。 $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件 -（5）provide / inject 适用于 隔代组件通信 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。 -（6）Vuex 适用于 父子、隔代、兄弟组件通信 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。