?【前言】

在使用vue2構(gòu)建頁(yè)面時(shí)候，博主遇到的問(wèn)題難點(diǎn)以及最終的解決方案。
??博主：初映CY的前說(shuō)(前端領(lǐng)域) ??本文核心：博主遇到的問(wèn)題與解決思路

?數(shù)據(jù)枚舉文件的使用

同后端那邊發(fā)送請(qǐng)求的時(shí)，請(qǐng)求返回過(guò)來(lái)的是數(shù)字等，有時(shí)我們實(shí)際頁(yè)面上渲染的不是數(shù)字。這需要怎么處理呢？寫一個(gè)枚舉的映射文件就可以解決。我們發(fā)送完成請(qǐng)求并且拿到響應(yīng)結(jié)果后將這個(gè)數(shù)據(jù)放進(jìn)枚舉文件中進(jìn)行映射。
舉個(gè)例子：
后端發(fā)送的是：xxxx:0，我需要將0對(duì)應(yīng)的值轉(zhuǎn)化成我們需要的。
前端的枚舉文件假設(shè)為：

// 題型
export const questionType = [
  {
    value: 1,
    label: '單選'
  },
  {
    value: 2,
    label: '多選'
  },
  {
    value: 3,
    label: '簡(jiǎn)答'
  }
]

• 1.分析枚舉文件將每一項(xiàng)拆分成數(shù)組的形式

const hireType = questionType.reduce((acc, item) => {
  acc[item.value] = item.label
  return acc
}, {})

• 2.將枚舉文件與后端傳遞過(guò)來(lái)的值進(jìn)行映射連接

        // 格式化題型形式的數(shù)據(jù)
        formHireType (value) {
      return hireType[value] || '未知' // 方式2這樣寫只會(huì)執(zhí)行一次優(yōu)化了性能
    },

• 3.我們此刻在頁(yè)面上進(jìn)行渲染的時(shí)候?qū)?shù)字傳遞進(jìn)去，調(diào)用這個(gè)方法就可以了

        <template #default="{row}">
          {{ formHireType(row.questionType) }}//此處的row.questionType為一個(gè)數(shù)字
        </template>

此時(shí)，我們頁(yè)面上如果接受的是1、2、3的時(shí)候都能找到映射出來(lái)的值。如果不屬于1、2、3中的任意一個(gè)則頁(yè)面上將會(huì)顯示“未知”作為值渲染到頁(yè)面上去。

整體流程為：分析接口、找到映射文件進(jìn)行格式轉(zhuǎn)換、渲染前調(diào)用格式轉(zhuǎn)換方法即可

?elementUI中分頁(yè)組件使用的注意事項(xiàng)

常用的屬性：

      @size-change="handleSizeChange"//每頁(yè)條數(shù)變化的時(shí)候觸發(fā)
      @current-change="handleCurrentChange"//當(dāng)前頁(yè)變化的時(shí)候觸發(fā)
      :current-page="formData.page"//當(dāng)前頁(yè)碼
      :page-size="formData.pagesize"//頁(yè)面現(xiàn)實(shí)的數(shù)量
      :page-sizes="[2, 4, 6, 8,10]"//分頁(yè)器
      :total="counts"//總數(shù)
      layout=" prev, pager, next,sizes, jumper"//顯示的值

日常使用的時(shí)候，注意一下幾點(diǎn)：

• 1.page-size的值應(yīng)該與分頁(yè)其中某一個(gè)值數(shù)量設(shè)置是相同的，否則當(dāng)我們發(fā)page-size給服務(wù)器時(shí)，就會(huì)出現(xiàn)分頁(yè)器上之后我們傳遞過(guò)去的page-size而不是某條/頁(yè)。
• 2.每頁(yè)條數(shù)切換完成之后需要重新將page也就是當(dāng)前頁(yè)數(shù)重置為1。
• 3.執(zhí)行這兩個(gè)回調(diào)函數(shù)中都需要重新調(diào)用一下我們頁(yè)面渲染的列表確保數(shù)據(jù)能夠得到及時(shí)的更新。

?v-html標(biāo)簽的作用

這個(gè)標(biāo)簽具有解析HTML標(biāo)簽的作用。常用于接收后臺(tái)響應(yīng)過(guò)來(lái)的數(shù)據(jù)進(jìn)行一個(gè)解析。
舉個(gè)例子當(dāng)響應(yīng)數(shù)據(jù)具有html標(biāo)簽，而我不使用v-html直接將數(shù)據(jù)渲染呈現(xiàn)如下：

<pre class="ql-syntax" spellcheck="false">cconst <span class="hljs-built_in">con</span> = '連接' </pre>

當(dāng)我運(yùn)用v-html進(jìn)行解析后，頁(yè)面渲染如下所示：

完美將富文本格式進(jìn)行了解析，將解析后的值渲染到了頁(yè)面當(dāng)中。

?elementUI下拉框必須v-model進(jìn)行雙向綁定

沒有雙向綁定，控制臺(tái)會(huì)找不到我們下拉框的select這個(gè)標(biāo)簽的value是什么

這也說(shuō)到了一個(gè)雙向綁定過(guò)程中：這個(gè)當(dāng)我沒寫v-model我的值是從optiop的value中獲取到的。沒有寫雙向綁定這個(gè)值就傳遞不出去給其他需要用到這個(gè)值的地方使用。當(dāng)我寫下v-mol就是完美的將這個(gè)下拉選擇框的值與data中的數(shù)據(jù)進(jìn)行了一個(gè)綁定，故此其他地方也能夠使用上我們這個(gè)值。

?組件封裝傳值的思想

組件封裝的流程很固定：①導(dǎo)入②注冊(cè)③引用
具體使用封裝方法可參考博主的博客：組件封裝與傳值
關(guān)注點(diǎn)在于為什么需要封裝以及怎么傳值這是我們需要關(guān)注的注意點(diǎn)。封裝是解決我們代碼復(fù)用的問(wèn)題，我們可以在多個(gè)頁(yè)面當(dāng)中使用到這個(gè)組件。極大程度上避免了我們遇到了一個(gè)全新的頁(yè)面就把代碼從其他地方直接cv過(guò)來(lái)，雖然可以但是這樣代碼的體積就大了。那封裝完成了我們就需要把重點(diǎn)放在傳值上面去了。常用的父子傳值就需要整起來(lái)的了，具體的使用方法請(qǐng)移步我的博客vue專欄即可，里面很詳細(xì)的寫了從零基礎(chǔ)學(xué)習(xí)vue的絕大多數(shù)知識(shí)點(diǎn)。
父?jìng)髯佑茫?/p>

：data="data"

父接收：

@子組件傳遞過(guò)來(lái)的事件名="父組件中全新的事件名稱"

子接收：

props:{
data:{
type:"類型"，//注意大寫首字母如Number
required：'true/false'//用于判斷是不是必須傳
	}
}

子傳遞：

this.$emit('事件名'，這里放傳過(guò)去的數(shù)據(jù)（可省略）)

以上便是近期bug收集與整理02，后面也會(huì)不定期更新，敬請(qǐng)期待！

至此本文結(jié)束，愿你有所收獲！
期待大家的關(guān)注與支持! 你的肯定是我更新的最大動(dòng)力！??！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-788189.html

到了這里，關(guān)于【vue2】近期bug收集與整理02的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！