详解Vue中$props、$attrs和$listeners的使用方法

背景

现在我们来讨论一种情况，父组件与孙子组件怎么通信，我们有多少种解决方案？

我们使用vuex来进行数据管理，但是如果项目中多个组件共享状态比较少，项目比较小，并且全局状态比较少,那使用vuex来实现该功能，并没有发挥出vuex的威力。使用b来做中转站，当a组件需要把信息传给c组件时，b接受a组件的信息，然后利用属性传给c组件， 这是一种解决方案，但是如果嵌套的组件过多，会导致代码繁王昌龄的出塞琐，代码维护比较困难;如果c中状态的改变需要传递给a, 使用事件系统一级级往上传递 。自定义一个vue 中央数据总线，这个情况适合碰到组件跨级传递消息，但是缺点是 碰到多人合作时，代码的维护性较低，代码可读性低

一、文档描述

（1）$props：当前组件接收到的 props 对象。vue 实例代理了对其 props 对象属性的访问。

（2）$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

（3）$listeners：包含了父作用域中(不含 .native 修饰器的)v-on事件监听器。他可以通过 v-on=”listeners”传入内部组件

二、具体使用

1、父组件

<template>  <div>    <div>父亲组件</div>    <child      :foo="foo"      :zoo="zoo"      @handle="handlefun"    >    </child>  </div></template><script>import child from './child.vue'export default {  components: { child },  data() {    return {      foo: 'foo',      zoo: 护肤面膜'zoo'    }  },  methods: {    // 传递事件    handlefun(value) {      this.zoo = value      console.log('孙子组件发生了点击事件，我收到了')    }  }}</script>

2. 儿子组件（child.vue）

中间层，作为父组件和孙子组件的传递中介，在儿子组件中给孙子组件添加v-bind="$attrs"，这样孙子组件才能接收到数据。

$attrs是从父组件传过来的，且儿子组件未通过props接收的数据，例如zoo

<template>  <div class='child-view'>    <p>儿子组件--{{$props.foo}}与{{foo}}内容一样</p>    <grandchild v-bind="$attrs" v-on="$listeners"></grandchild>  </div></template><script>import grandchild from './grandchild.vue'export default {  // 继承所有父组件的内容  inheritattrs: true,  components: { grandchild },  props: ['foo'],  data() {    return {    }  }}</script>

3. 孙子组件（grandchild.vue）

在孙子组件中一定要使用props接收从父组件传递过来的数据

<template>  <d有为青年iv clas事半功倍的反义词s='grand-child-view'>    <p>孙子组件</p>    <p>传给孙子组件的数据：{{zoo}}</p>    <button @click="testfun">点我触发事件</button>  </div></template><script>export default {  // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性  inheritattrs: fal,  // 在本组件中需要接收从父组件传递过来的数据，注意props里的参数名称不能改变，必须和父组件传递过来的是一样的  props: ['zoo'],  methods: {    testfun() {      this.$emit('handle', '123')    }  }}</script>

三、总结

从上面的代码，可以看出使用attrs、inheritattrs属性 能够使用简洁的代码，将a组件的数据传递给c组件，该场景的使用范围还是挺广的。

通过listeners，我们在b组件上 绑定 v-on=”$listeners”, 在a组件中，监听c组件触发的事件。就能把c组件发出的数据，传递给a组件。

到此郭守敬主要贡献这篇关于详解vue中$props、$attrs和$listeners的使用方法的文章就介绍到这了,更多相关vue $props、$attrs和$listeners内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！