高级组件封装v-bind=“$attrs“ v-on=“$listeners“继承原有组件的属性和方法

我们进行业务开发的时候, 为了使页面快速成型,通常会使用一些比较常见的的组件库,然后对于高频使用的组件进行二次开发,那么二次开发的组件如何继承原有组件的属性和方法就是比较常见的问题,vue中为我们提供了很好的解决方案
https://v2.cn.vuejs.org/v2/api/#vm-attrs
https://v2.cn.vuejs.org/v2/api/#vm-listeners

父组件

<template>
  <div>
    <!-- 高级组件封装 -->
    <Son type="primary" content="点击生成随机数" @click="handleClick" />
    <div>{{ random }}</div>
  </div>
</template>

<script>
import Son from './son.vue'
export default {
  name: 'Father',
  components: {
    Son
  },
  data() {
    return {
      random: ''
    }
  },
  methods: {
    handleClick() {
      this.random = Math.random()
    }
  }
}
</script>

<style lang="scss" scoped></style>

子组件

<template>
  <div>
    <!-- 子组件 -->
    <!-- v-bind="$attrs" 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何
    prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"
    传入内部组件——在创建高级别的组件时非常有用。 -->
    <!-- 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 -->
    <el-button v-bind="$attrs" v-on="$listeners">
      {{ content }}
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'Son',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped></style>

关于网络上的一些用法:
vue中使用v-bind=“$attrs“进行多层组件的传值
vue中使用v-on="listeners"进行多层级组件的传值
二次封装高频组件