Vue组件之间通信、传值

Vue组件之间通信、传值

• props和$emit

  父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的

• $attrs 和 $listeners

  如果父组件A下面有子组件B，组件B下面有组件C，这时如果组件A想传递数据给组件C怎么办呢？如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C。要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C

• 中央事件总线（非父子组件间通信）

  上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件

• v-model语法糖

  父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过 this.$emit('input',val) 自动修改v-model绑定的值

• 插槽分发内容

  slot-scope="slot" 来引用插槽对象，从而拿到slot中绑定的数据

• provide和inject

  在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据

  父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用

• $root、$parent、$children、$refs

  在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作

• vuex

  如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的