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

• 配景
  
• 一、文档形貌
  
• 二、具体利用
  
• 三、总结
  

• 我们利用VueX来进行数据管理，但是如果项目中多个组件共享状态比力少，项目比力小，而且全局状态比力少,那利用VueX来实现该功能，并没有发挥出VueX的威力。
  
• 利用B来做中转站，当A组件需要把信息传给C组件时，B担当A组件的信息，然后利用属性传给C组件， 这是一种办理方案，但是如果嵌套的组件过多，会导致代码繁琐，代码维护比力困难;如果C中状态的改变需要传递给A, 利用变乱体系一级级往上传递 。
  
• 自界说一个Vue 中心数据总线，这个情况适合碰到组件跨级传递消息，但是缺点是 碰到多人合作时，代码的维护性较低，代码可读性低
  

<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>
复制代码

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>
复制代码

<template>
  <div class='grand-child-view'>
    <p>孙子组件</p>
    <p>传给孙子组件的数据：{{zoo}}</p>
    <button @click="testFun">点我触发事件</button>
  </div>
</template>

<script>
export default {
  // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
  inheritAttrs: false,
  // 在本组件中需要接收从父组件传递过来的数据，注意props里的参数名称不能改变，必须和父组件传递过来的是一样的
  props: ['zoo'],
  methods: {
    testFun() {
      this.$emit('handle', '123')
    }
  }
}
</script>
复制代码