vue官方文件注意點 基礎元件的自動化全域性註冊

2021-09-01 22:20:02 字數 632 閱讀 2350

可能你的許多元件只是包裹了乙個輸入框或按鈕之類的元素,是相對通用的。我們有時候會把它們稱為基礎元件,它們會在各個元件中被頻繁的用到。

幸好如果你使用了 webpack (或在內部使用了 webpack 的 vue cli 3+),那麼就可以使用require.context只全域性註冊這些非常通用的基礎元件。這裡有乙份可以讓你在應用入口檔案 (比如src/main.js) 中全域性匯入基礎元件的示例**:

import vue from 'vue'

import upperfirst from 'lodash/upperfirst'

import camelcase from 'lodash/camelcase'

const requirecomponent = require.context(

// 其元件目錄的相對路徑

'./components',

// 是否查詢其子目錄

false,

// 匹配基礎元件檔名的正規表示式

/base[a-z]\w+\.(vue|js)$/

)requirecomponent.keys().foreach(filename => )

vue元件劃分注意點

如何實現元件化 基礎元件主要指那些本身不包含任何業務邏輯 可以被輕鬆復用的元件,例如 picker timepicker toast dialog actionsheet 等等.基礎元件的通訊基本就是往元件傳入 prop,並監聽元件 emit 的事件。業務元件主要指那些包含業務邏輯,包括一些與後端介...

Vue官方文件學習 動態元件和非同步元件

當在多個元件之間進行切換 如選項卡 的時候,為了避免重複渲染導致的效能問題,可能會想對元件進行快取。比如在某個選項卡中選擇了某個選單閱讀某篇長文章,切換選項卡再切換回來,如果沒有保持元件狀態,選單將回到初始選中狀態。v bind is currenttabcomponent component 在切...

Vue 關於vue官方文件的個人小結

vue cli service暴露了inspect命令用於審查解析好的 webpack 配置。1.將其輸出重定向到乙個檔案以便進行查閱 vue inspect output.js 2.通過指定乙個路徑來審查配置的一小部分 vue inspect module.rules.0 只審查第一條規則 3.指...