Vue中對組件二開的方法是什么

這篇文章主要介紹“Vue中對組件二開的方法是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue中對組件二開的方法是什么”文章能幫助大家解決問題。

一、背景

在對antdv、element、自定義組件二開過程中，最困擾的問題如下:

• 組件那么多屬性我如何傳遞，props? v-model?屬性多的話透傳有點呆。

• 組件提供的多個事件怎么調用？emit? 事件多的情況下代碼冗余。

• 組件提供的方法怎么調用？ref 父子間并不能透傳。但這個在react里很方便。

• solt怎么處理，一個個自己定義透傳嗎？作用域插槽、具名插槽很多的話怎么處理？

這個是準備去做二開UI組件的時候,遇到的幾個不能一下子就能打開思路的問題；

二、解決思路以及方案

前兩個問題比較簡單，利用$attts和$listeners兩個組件屬性就能解決。

a. $attts ：繼承所有的父組件屬性 （除了 prop 傳遞的屬性、class 和 style ） **，一般用在子組件的子元素上；

b $listeners：它是一個對象，里面包含了作用在這個組件上的所有監聽器，你就可以配合v-on="$listeners"將所有的事件監聽器指向這個組件的某個特定的子元素。（相當于子組件繼承父組件的事件）

<templete>
  <div>
    <div>{{ text }}</div>
    <el-input v-bind="$attts" v-on="$listeners" placeholder="請輸入內容"></el-input>
  </div>
</templete>
<script>
export default {
  props:{
    text:String,
  }
  mounted(){
    console.log(this.$attrs)
  }
}
</script>

<templete>
  <div>
    <child type="text" v-model="input" text @blur="onBlur"></div>
  </div>
</templete>
<script>
export default {
  data() {
    return {
      input: '',
      text:'子組件的props'
    }
  },
  methods:{
    onBlur(){
      // ...
    }
  }
}
</script>

關于調用子組件中的方法（子組件拿不到父組件的ref），網上也看到了很多方案，從便捷度來說，我個人更傾向于將方法直接綁定在組件實例上。

tips:** 善用object中的entries**,返回Array<[key:string, value:any?]>類型的二維數組

<templete>
  <div>
    <child ref="childRef" type="text" v-model="input" text @blur="onBlur"></div>
  </div>
</templete>
<script>
export default {
  data() {
    return {
      input: '',
      text:'子組件的props'
    }
  },
  mounted(){
    console.log(this.$ref.childRef)
  },
  methods:{
    onBlur(){
      // ...
    }
  }
}
</script>

<templete>
  <div>
    <div>{{ text }}</div>
    <el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="請輸入內容"></el-input>
  </div>
</templete>
<script>
export default {
  props:{
    text:String,
  }
  mounted(){
    console.log(this.$attrs)
    // 綁定ref到組件實例上
    const entries = Object.entries(this.$ref.inpRef)
    for(const [key, value] of entries){
      this[key] = value;
  	}
}
</script>

插槽主要用的$slots，這邊對作用域插槽數據做了兜底，不然會報錯；

tips: 在vue模版中遍歷對象**，會拿到* value、name*兩個值

<templete>
  <div>
    <child ref="childRef" type="text" v-model="input" text @blur="onBlur">
    	<template slot="prepend">Http://</template>
    </child>
  </div>
</templete>
<script>
export default {
  data() {
    return {
      input: '',
      text:'子組件的props'
    }
  },
  mounted(){
    console.log(this.$ref.childRef)
  },
  methods:{
    onBlur(){
      // ...
    }
  }
}
</script>

<templete>
  <div>
    <div>{{ text }}</div>
    <el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="請輸入內容">
      <templete v-for="(value, name) in $slot" #[name]="slotData">
        <slot :name="name" v-bind = "slotData || {}"></slot>
      </templete>
    </el-input>
  </div>
</templete>
<script>
export default {
  props:{
    text:String,
  }
  mounted(){
    console.log(this.$attrs)
    // 綁定ref到組件示例上
    const entries = Object.entries(this.$ref.inpRef)
    for(const [key, value] of entries){
      this[key] = value;
  	}
}
</script>

關于“Vue中對組件二開的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。