高级组件封装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>
    
    
    
    <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"进行多层级组件的传值
二次封装高频组件