欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中對組件二開解決思路以及方案

 更新時(shí)間:2023年04月17日 09:11:41   作者:程序不了猿  
這篇文章主要介紹了Vue中對組件二開解決思路以及方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

一、背景

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

  • 組件那么多屬性我如何傳遞,props? v-model?屬性多的話透傳有點(diǎn)呆。
  • 組件提供的多個(gè)事件怎么調(diào)用?emit? 事件多的情況下代碼冗余。
  • 組件提供的方法怎么調(diào)用?ref 父子間并不能透傳。但這個(gè)在react里很方便。
  • solt怎么處理,一個(gè)個(gè)自己定義透傳嗎?作用域插槽、具名插槽很多的話怎么處理?

這個(gè)是準(zhǔn)備去做二開UI組件的時(shí)候,遇到的幾個(gè)不能一下子就能打開思路的問題;

二、解決思路以及方案

前兩個(gè)問題比較簡單,利用$attts$listeners兩個(gè)組件屬性就能解決。

a. $attts :繼承所有的父組件屬性 (除了 prop 傳遞的屬性、class 和 style ) **,一般用在子組件的子元素上;

b $listeners:它是一個(gè)對象,里面包含了作用在這個(gè)組件上的所有監(jiān)聽器,你就可以配合v-on="$listeners"將所有的事件監(jiān)聽器指向這個(gè)組件的某個(gè)特定的子元素。(相當(dāng)于子組件繼承父組件的事件)

<templete>
  <div>
    <div>{{ text }}</div>
    <el-input v-bind="$attts" v-on="$listeners" placeholder="請輸入內(nèi)容"></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>

關(guān)于調(diào)用子組件中的方法(子組件拿不到父組件的ref),網(wǎng)上也看到了很多方案,從便捷度來說,我個(gè)人更傾向于將方法直接綁定在組件實(shí)例上。

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

<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="請輸入內(nèi)容"></el-input>
  </div>
</templete>
<script>
export default {
  props:{
    text:String,
  }
  mounted(){
    console.log(this.$attrs)
    // 綁定ref到組件實(shí)例上
    const entries = Object.entries(this.$ref.inpRef)
    for(const [key, value] of entries){
      this[key] = value;
  	}
}
</script>

插槽主要用的$slots,這邊對作用域插槽數(shù)據(jù)做了兜底,不然會(huì)報(bào)錯(cuò);

tips: 在vue模版中遍歷對象**,會(huì)拿到* value、name*兩個(gè)值

<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="請輸入內(nèi)容">
      <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>

到此這篇關(guān)于Vue中對組件二開解決思路以及方案的文章就介紹到這了,更多相關(guān)Vue組件二開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論