vue中父子组件通信

通信方式：

> props（常用）
> props和$emit（常用）
> .sync（语法糖）
> model（单选框和复选框场景可以使用）
> $attr和$listeners（组件封装用的比较多）
> provide和inject（高阶组件/组件库使用比较多）
> eventBus（小项目中使用就好）
> Vuex（中大型项目推荐使用）
> $parent和$children（推荐少用）
> $root（组件树的根，用的少）
> 其他通信方式

一、props

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

在使用prop传参时需要注意：

vue的设计理念是单向数据流，不建议在子组件直接更改父级的数据。
未在父组件data中声明的对象属性，子组件无法获取更新内容。
数组的变化和更新，取决于vue重写数组方法是否有实现数据监听功能。vue有两种观察数组的方法：变异方法（push、pop、shift、unshift、splice、sort、reverse）和非变异方法（filter、concat、slice），变异方法可以修改原数组，非变异方法不可以修改原数组，但是非变异方法可以用新数组替换旧数组来实现数据的重新渲染。

    // Father组件

    // Child组件

二、props和$emit

触发当前实例上的事件。附加参数都会传给监听器回调。

emit的使用场景主要是在子组件要传参数给父组件，通过$emit来触发父组件给的监听器。

    // Father组件

    // Child组件

三、.sync语法糖（2.3.0+ 新增）

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。因此以 update:myPropName 的模式触发事件取而代之。

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用，这样会把 obj 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

    // Father组件

    // Child组件

四、model（2.2.0 新增）

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

    // Father组件

    // Child组件

五、$attrs和$listeners (2.4.0 新增)

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

inheritAttrs也是2.4.0 新增，默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。

    // 第一个组件

    // 第二个组件

    // 第三个组件

六、provide / inject（2.2.0 新增）

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是一个字符串数组，或一个对象，对象的 key 是本地的绑定名。value 是在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象。该对象的：from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)，default 属性是降级情况下使用的 value。
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

    // one组件

    // two组件

    // three组件

    // symbol.js文件的内容
    const KEY = Symbol()
    
    export default {
        KEY
    }

七、$parent

指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信。

    // Father组件

    // Child组件

八、EventBus

声明一个全局Vue实例变量 EventBus , 把所有的通信数据，事件监听都存储到这个变量上。这样就达到在组件间数据共享了，有点类似于 Vuex。

这种方式只适用于极小的项目，复杂项目还是推荐 Vuex。
不仅可以在父子组件通信，兄弟组件也可以实现通信。

    // Father组件

    // Child组件

    // ChildB组件

九、$root

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

通过访问根组件也能进行数据之间的交互，但极小情况下会直接修改父组件中的数据。

十、Vuex

官方推荐的，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

推荐使用在全局状态管理多的情况使用（中大型项目）。
例如路由访问控制、用户信息存储、权限树、检测登录状态等场景使用Vuex更好。

十一、broadcast和dispatch

vue1.0中提供了这种方式，但vue2.0中没有，但很多开源软件都自己封装了这种方式，比如min-ui、element-ui和iview等。

broadcast是寻找指定子辈组件，然后触发事件，可理解为广播。
dispatch是寻找指定的祖辈组件，然后触发事件，可理解为调度。
一般都作为一个mixins去使用, 本质上这种方式还是on和emit的封装，但在一些基础组件中却很实用。

    function broadcast(componentName, eventName, params) {
      this.$children.forEach(child => {
        // 遍历子组件
        var name = child.$options.name // 获取子组件的组件名
    
        if (name === componentName) {
          // 判断是不是要派发的子组件
          child.$emit.apply(child, [eventName].concat(params)) // 调用子组件的派发方法
        } else {
          broadcast.apply(child, [componentName, eventName].concat([params])) // 否则this交给子组件，寻找孙子组件中是否存在
        }
      })
    }
    export default {
      methods: {
        // 调度
        dispatch(componentName, eventName, params) {
          var parent = this.$parent || this.$root // 获取父组件
          var name = parent.$options.name /// 获取父组件的组件名
    
          while (parent && (!name || name !== componentName)) {
            // 判断父组件是否存在 && （父组件名是否为空 || 父组件名不等于要派发的组件名）
            parent = parent.$parent // 获取父组件的父组件
    
            if (parent) {
              // 如果父组件的父组件存在
              name = parent.$options.name // 获取父组件的父组件的组件名
            }
          }
          // 结束循环
          if (parent) {
            // 判断有没有找到要派发的父级组件
            parent.$emit.apply(parent, [eventName].concat(params)) // 调用父级的派发方法
          }
        },
        // 广播
        broadcast(componentName, eventName, params) {
          broadcast.call(this, componentName, eventName, params) // this指向当前调用该方法的父组件
        }
      }
    }

更多详细内容，请前往GitHub查看

vue中父子组件通信

通信方式：

一、props

String使用：

二、props和$emit

三、.sync语法糖（2.3.0+ 新增）

四、model（2.2.0 新增）

五、$attrs和$listeners (2.4.0 新增)

六、provide / inject（2.2.0 新增）

七、$parent

八、EventBus

父组件Father

子组件Child

子组件ChildB

九、$root

十、Vuex

十一、broadcast和dispatch

你可能感兴趣的:(vue中父子组件通信)