重写组件v-bind=“props“ v-bind=“attrs“ v-on=“$listeners“

1、组件的重写

子组件：

<template>
  <div class="base-select">
    <a-select style="width:300px;height:60px;"   v-on="$listeners" v-bind="$attrs">
      <a-select-option :value="item.value" v-for="(item,index) in listOption" :key="index" >
       {{item.name}}
      </a-select-option>
    </a-select> 
  </div>
</template>

<script>
import {Select} from 'ant-design-vue'
export default {
  props:{
    listOption:{
      type:Array,
      default:function(){
        return[]
      }
    },
  },  
  data(){
    return{
    }
  },
  created(){
    console.log('Select.props',Select.props)
  }
}
</script>
<style scoped>
/deep/ .ant-select-selection--single{
  height: 50px!important;
  line-height: 50px!important;
}
/deep/ .ant-select-selection__rendered{
  height: 50px!important;
  line-height: 50px!important;
}
/deep/ .ant-select-search--inline{
  display: block!important;

}
</style>

父组件

<template>
  <div class="HomePage">
      <base-select 
        :listOption="list" 
        @change="changeOption"
        @select="select"
        @click.native="click"
        :showSearch="true"
        :allowClear="true"
        :autoFocus="true"
        defaultValue='请选择你喜欢的'
      >
      </base-select>
  </div>
</template>

<script>
export default {
 data(){
   return{
     list:[
      {name:'小猪',value:1},
      {name:'小猫',value:2},
      {name:'小猴',value:3},
      {name:'老虎',value:4},
     ],
     showSearchFlag:true
   }
 },
 mounted(){
 },
 methods:{
   changeOption(value,option){
     console.log('changeOption',value)
     console.log('changeOption',option)
   },
   select(value,option){
      console.log('select-value',value)
      console.log('select-option',option)
   },
   click(){
     console.log('原生事件')
   }
 }
}
</script>

知识点： 

 A（爷爷组件）B（爸爸组件） C（孙子组件） 向下传递

v-bind="props"  ：A组件的通过props向B组件传值，B组件将A组件的值传给C 由于很多  可以在B 组件上写v-bind="$props" 以达到不用写多个的目的      (props直接对应基本组件不需要接收值，要是不是基本组件需要接收值，接收值可以参考我查看的第一个链接，在尾部)

v-bind="attrs"  是除了props的属性不包含（class,style)  

v-on="$listeners"  向下传递 将父组件的事件（除了.native)v-on事件传给子组件,子组件不需要接收。 这里.native事件是原生事件如：click()

 学习参考 https://blog.csdn.net/weixin_40542544/article/details/108598970     https://www.cnblogs.com/jin-zhe/p/13099416.html