快捷導(dǎo)航

vue中使用render封裝一個(gè)select組件

更新時(shí)間：2022年09月02日 10:17:40 作者：不求人0

這篇文章主要介紹了vue中使用render封裝一個(gè)select組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用render封裝一個(gè)select組件

父組件

    value - {{ value }} ; value2 - {{ value2 }}
    <!--  disabled clearable   -->
    <Select v-model="value" :option-data="optionData" placeholder="請(qǐng)選擇" clearable />
    <Select v-model="value2" :option-data="optionData" />
      value: '', // 默認(rèn)值為空字符串
      value2: 'area1',
      optionData: [
        { label: '區(qū)域1', value: 'area1' },
        { label: '區(qū)域2', value: 'area2' }
      ],

Select.vue

<script>
export default {
  name: 'Select',
  props: {
    value: {
      default: '',
      type: [String, Number]
    },
    optionData: {
      default: () => {
        return []
      },
      type: Array
    }
  },
  computed: {
    newValue: {
      get({ value }) {
        return value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    onChangeHandle(val) {
      this.newValue = val
    }
  },
  render(createElement) {
    return createElement(
      // 標(biāo)簽
      'el-select',
      // 相關(guān)屬性參數(shù)
      {
        // html 相關(guān)的屬性 placeholder id 等
        attrs: {
          ...this.$attrs //  ( { placeholder:請(qǐng)輸入 } )
        },
        // props相關(guān)的
        props: {
          value: this.newValue
        },
        // 事件相關(guān)
        on: {
          change: this.onChangeHandle
        }
      },
      this.optionData && this.optionData.map(option => {
        return createElement(
          'el-option',
          {
            props: {
              label: option.label,
              value: option.value
            }
          }
        )
      })
    )
  }
}
</script>

效果

在這里插入圖片描述

vue另類封裝--render函數(shù)封裝

在講解render函數(shù)封裝前，擴(kuò)展一下組件自動(dòng)全局注冊(cè)的方法

先看看文件的結(jié)構(gòu)

接下來就是注冊(cè)代碼（即lib下的index.js代碼）

export default {
  install(Vue) {
    // 讀取components文件夾下的文件
    // const req = require.context('路徑','是否讀取子文件夾','正則匹配')
    // req是一個(gè)函數(shù)，該函數(shù)有三個(gè)屬性分別是resolve、keys、id
    // 下面進(jìn)行詳細(xì)說明這三個(gè)屬性
    const req = require.context("@/components", false, /\.vue$/);
    //拿到讀取文件的路徑
    //導(dǎo)入處理
    req.keys().forEach((item) => {
      const com = req(item).default;
      // 全局注冊(cè)組件
      Vue.component(com.name, com);
    });
  },
};

接下來我們?cè)贏pp文件直接使用components下的組件

<template>
  <div>
    <myA></myA>
    <myB></myB>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      flag: false,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped></style>

resolve：它是一個(gè)函數(shù)，接收一個(gè)參數(shù)（這個(gè)參數(shù)是匹配文件的相對(duì)路徑），返回值是匹配文件相對(duì)于項(xiàng)目的路徑
keys：它也是一個(gè)函數(shù)，返回的是匹配成功文件的相對(duì)路徑（不包括文件名稱）
id：返回的是一個(gè)字符串，匹配的文件夾的路徑（）、匹配規(guī)則等

render函數(shù)封裝

下面封裝以面包屑為例

在a.vue下定義組件

<template>
? <span>
? ? <router-link v-if="to" :to="to">
? ? ? <slot />
? ? </router-link>
? ? <span v-else>
? ? ? <slot />
? ? </span>
? </span>
</template>
<script>
export default {
? name: "BreadcrumbItem",
? props: {
? ? to: {
? ? ? type: [Object, String],
? ? ? default: "",
? ? },
? },
};
</script>

在b組件進(jìn)行封裝

<script>
export default {
? name: "Breadcrumb",
? // 開啟函數(shù)組件模式，它內(nèi)部的東西不是響應(yīng)式，并且沒有生命周期
? functional: true,
? render: (h, context) => {
? ? //創(chuàng)建數(shù)組接收虛擬節(jié)點(diǎn)
? ? const vnodeArr = [];
? ? context.slots().default.forEach((item, index, arr) => {
? ? ? // 將處箭頭外的虛擬dom存儲(chǔ)起來
? ? ? vnodeArr.push(item);
? ? ? // 判斷是不是最后一項(xiàng)，是最后一項(xiàng)就不要加箭頭
? ? ? if (arr.length - 1 !== index) {
? ? ? ? // 加上箭頭虛擬節(jié)點(diǎn)
? ? ? ? vnodeArr.push(h("i", { class: "el-icon-arrow-right" }));
? ? ? }
? ? });
? ? // render作用：它會(huì)return一個(gè)虛擬dom，return什么就渲染相應(yīng)的實(shí)體Dom
? ? // h：創(chuàng)建虛擬DOM，有三個(gè)參數(shù) ? ? 參數(shù)一：標(biāo)簽/組件 ? ?參數(shù)二：虛擬dom配置 ? 參數(shù)三：虛擬dom/子節(jié)點(diǎn)
? ?// h(標(biāo)簽名/組件，{虛擬dom配置}，子集：也是虛擬dom節(jié)點(diǎn)信息支持字符串與數(shù)組)
? ?// 進(jìn)行渲染，h第三個(gè)參數(shù)可以為數(shù)組
? ? return h("span", {}, vnodeArr);
? },
};
</script>

App組件運(yùn)用

<template>
? <div>
? ? <Breadcrumb>
? ? ? <BreadcrumbItem to="/">首頁</BreadcrumbItem>
? ? ? <BreadcrumbItem>活動(dòng)列表</BreadcrumbItem>
? ? ? <BreadcrumbItem>活動(dòng)管理</BreadcrumbItem>
? ? ? <BreadcrumbItem>活動(dòng)詳情</BreadcrumbItem>
? ? </Breadcrumb>
? </div>
</template>
<script>
export default {
? name: "",
? data() {
? ? return {
? ? ? flag: false,
? ? };
? },
? computed: {},
? methods: {},
};
</script>
<style lang="less" scoped></style>

效果圖如下