vue组件通讯新姿势

来源

阅读了大漠老师的文章：Vue组件数据通讯新姿势：$attrs 和 $listeners感觉受益匪浅，闲来无事，总结一下vue组件传值的方法

习惯的传值方式

啥也不说，先上图！！

我们常见的组件之间的传值大概都跑不出这幅图，父子、兄弟之间进行通讯。

1. 父组件传值子组件：父组件通过props下发给子组件
2. 子组件通过事件触发将数据emit给父组件
3. 父子组件之间的通讯也可以通过 ref 属性、$parent、$children等方法获取数据和事件。
4. 兄弟组件之间的通讯则用eventBus或者VueX（不是太复杂的工能，就没有必要使用VueX了，省的画蛇添足）
   这些经常用的就不说了。。。。

今天的主角

1.$attr

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

$$attrs中存放了父组件中绑定的不是props的属性，而子组件通过$attrs这个属性就可以获取到父组件要传给子组件的值。。

2.$listeners

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

简单来说就是：事件监听，但是监听的事件对象不包括原生的方法，例如@click.native

//代码解释这两个属性的意义

// 父组件

   <template>
  <div id="app">
    <h1>测试通讯</h1>
    <HelloWorld name="name" age="age" @click.native="haha" @mousemove="smile"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  name: 'app',
  data() {
    return {
      name: 'lao Wang',
      age: '26'
    }
  },
  methods: {
    haha(){},
    smile(){}
  }
}
</script>

// 子组件
<template>
   <div>
     <h1>测试</h1>
   </div>
</template>
<script>
export default {
  name: 'HelloWorld',
   mounted() {
   console.log(this.$attrs, this.$listeners);
   //{   name: 'lao Wang',age: '26'}
   //{mousemove: ƒ}
  }
}
</script>

嵌套组件内的应用

在封装组件的时候，有时候会出现组件套组件的情况就会出现祖孙之间的通讯。实现祖孙之间的通讯，如果换成我们经常用的方法（就是上面提到的非 $attr和 $listeners通讯方法），这样的话我们的我我们需要逐层封装方法，传值等等，代码是在是繁琐。而 $attr和 $listeners则很好的解决了这个问题。

//父亲的父亲的页面
<template>
  <div id="app">
    <h1>测试通讯</h1>
    <HelloWorld name="name" age="age" @click.native="haha" @mousemove="smile"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  name: 'app',
  data() {
    return {
      name: 'lao Wang',
      age: '26'
    }
  },
  methods: {
    haha(){},
    smile(){}
  }
}
</script>
// 父级页面
<template>
   <div>
     <h1>测试</h1>
     <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
   </div>
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
  components: {
    GrandChild
  },
  name: 'HelloWorld',
}
// 孙子页面
<template>
   <div>
     <h1>孙子页面</h1>
   </div>
</template>

<script>
export default {
  name: 'GrandChild',
   mounted() {
    console.log(this.$attrs, this.$listeners);
      //{   name: 'lao Wang',age: '26'}
   //{mousemove: ƒ}
  }
}
</script>

这样是不是就方便多了

小结

个人感觉这两个属性的出现还是非常棒的，最起码组件之间的通讯实现起来更简单了。技术有限，如果有什么不足的地方欢迎各路大神指教，谢谢