VUE如何實現(xiàn)前端組件式開發(fā)和動態(tài)裝載詳解
更新時間：2025年10月22日 10:58:34 作者：猩火燎猿
Vue動態(tài)加載是指在Vue框架中,根據(jù)需要動態(tài)加載組件、模板或靜態(tài)資源的能力,這篇文章主要介紹了VUE如何實現(xiàn)前端組件式開發(fā)和動態(tài)裝載的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
一、認識vue組件
1. 組件的基本概念
組件是 Vue 應(yīng)用的基本組成單位，每個組件都可以包含自己的模板、邏輯和樣式。組件可以復(fù)用、嵌套和組合，從而構(gòu)建復(fù)雜的界面。
2. 創(chuàng)建組件
單文件組件（.vue 文件）
這是 Vue 最推薦的組件開發(fā)方式。
示例：MyButton.vue
<template>
<button @click="handleClick">{{ label }}</button>
</template>
<script>
export default {
name: 'MyButton',
props: {
label: String
},
methods: {
handleClick() {
this.$emit('click')
}
}
}
</script>
<style scoped>
button {
color: #42b983;
}
</style>
3. 使用組件
在父組件中注冊和使用
示例：App.vue
<template>
<div>
<MyButton label="點我" @click="onBtnClick" />
</div>
</template>
<script>
import MyButton from './components/MyButton.vue'
export default {
components: {
MyButton
},
methods: {
onBtnClick() {
alert('按鈕被點擊了！')
}
}
}
</script>
4. 組件通信
- props：父傳子
- $emit：子傳父
- provide/inject：祖先和后代組件通信
- Vuex/Pinia：全局狀態(tài)管理
5. 組件嵌套與復(fù)用
你可以在組件內(nèi)部繼續(xù)使用其他組件，實現(xiàn)嵌套和復(fù)用。
6. 組件開發(fā)規(guī)范
- 每個組件只做一件事，保持單一職責。
- 組件名建議采用 PascalCase。
- 通過 props 和事件暴露接口，避免直接操作父/子組件數(shù)據(jù)。
7. 組件庫
你可以自己開發(fā)組件庫，也可以使用現(xiàn)成的（如 Element Plus、Ant Design Vue 等）。
總結(jié)
Vue 組件式開發(fā)流程：
- 設(shè)計組件結(jié)構(gòu)（拆分頁面為多個組件）
- 編寫單文件組件（.vue）
- 通過 props 和事件進行通信
- 在父組件中注冊和使用子組件
- 組合和復(fù)用組件
8. 組件生命周期
Vue 組件有完整的生命周期鉤子，可以在不同階段執(zhí)行邏輯，比如：
<code>export default {
created() {
// 組件創(chuàng)建時執(zhí)行
},
mounted() {
// 組件掛載到 DOM 后執(zhí)行
},
updated() {
// 組件更新時執(zhí)行
},
destroyed() {
// 組件銷毀時執(zhí)行
}
}
</code>9. 動態(tài)組件 & 異步組件
動態(tài)組件
可以通過 <component :is="componentName"> 動態(tài)切換組件：
<template>
<component :is="currentComponent"></component>
</template>
<script>
import CompA from './CompA.vue'
import CompB from './CompB.vue'
export default {
data() {
return {
currentComponent: 'CompA'
}
},
components: { CompA, CompB }
}
</script>
異步組件
按需加載組件，優(yōu)化性能：
<code>const AsyncComp = () => import('./AsyncComp.vue')
export default {
components: { AsyncComp }
}
</code>10. 插槽（slot）
插槽讓組件更靈活，父組件可以向子組件插入內(nèi)容。
基本插槽
<!-- MyCard.vue -->
<template>
<div class="card">
<slot></slot>
</div>
</template>
具名插槽
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
父組件使用：
<MyCard> <template #header>標題</template> 內(nèi)容 <template #footer>底部</template> </MyCard>
作用域插槽
用于傳遞數(shù)據(jù)給插槽內(nèi)容：
<!-- List.vue -->
<template>
<div>
<slot v-for="item in items" :item="item"></slot>
</div>
</template>
父組件：
<List :items="listData">
<template #default="{ item }">
<div>{{ item.name }}</div>
</template>
</List>
11. 組件樣式隔離
在 <style scoped> 標簽下寫樣式，只作用于當前組件，避免樣式污染。
<style scoped>
.card { border: 1px solid #ccc; }
</style>
12. 組件自動導(dǎo)入（vite/vue-cli）
使用 Vite 或 Vue CLI 可以配置自動導(dǎo)入，無需手動 import：
<code>// vite.config.js
import Components from 'unplugin-vue-components/vite'
export default {
plugins: [
Components({ /* options */ })
]
}
</code>13. 組件測試
可以使用 Vue Test Utils 或 Vitest 進行單元測試，保證組件質(zhì)量。
14. 組件文檔與封裝
16. 組件拆分與復(fù)用實踐
頁面拆分思路
- 分析頁面結(jié)構(gòu)：把頁面劃分為多個功能區(qū)塊。
- 抽取公共部分：如按鈕、彈窗、表單、列表等，抽成獨立組件。
- 按職責分層：如頁面級（Page）、業(yè)務(wù)級（Business）、基礎(chǔ)級（Base）組件。
示例：
src/
components/
BaseButton.vue
BaseDialog.vue
UserList.vue
UserForm.vue
views/
UserPage.vue
17. 組件間通信進階
1. 父子通信（props/$emit）
- 父 -> 子：props
- 子 -> 父：this.$emit(‘事件名’, 數(shù)據(jù))
2. 兄弟通信
- 方案1：提升狀態(tài)到共同父組件
- 方案2：事件總線（Vue 3 推薦用 mitt 庫）
- 方案3：全局狀態(tài)管理（如 Pinia）
mitt 示例：
<code>// eventBus.js import mitt from 'mitt' export default mitt()</code>
<code>// 組件A
import bus from './eventBus'
bus.emit('custom-event', data)
// 組件B
import bus from './eventBus'
bus.on('custom-event', (data) => { ... })
</code>18. 組合式 API 與組件復(fù)用
Vue3 推薦使用組合式 API（setup、ref、reactive、computed、watch等），邏輯可以抽成 composable 復(fù)用。
示例：
<code>// useCounter.js
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
const inc = () => count.value++
return { count, inc }
}
</code><script setup>
import { useCounter } from './useCounter'
const { count, inc } = useCounter()
</script>
19. 動態(tài)組件和遞歸組件
動態(tài)組件
<component :is="current"></component>
遞歸組件
用于樹形結(jié)構(gòu)等場景，自己調(diào)用自己。
<TreeNode :node="node"> <TreeNode v-for="child in node.children" :node="child" /> </TreeNode>
20. 插槽的進階用法
- 默認插槽：
<slot></slot> - 具名插槽：
<slot name="footer"></slot> - 作用域插槽：向插槽傳遞數(shù)據(jù)
21. 組件懶加載和按需加載
提升性能，減少首屏包體積。
<code>const MyComp = defineAsyncComponent(() => import('./MyComp.vue'))
</code>22. 組件的自定義指令
有時你需要在組件中用自定義指令封裝 DOM 操作邏輯。
<code>app.directive('focus', {
mounted(el) {
el.focus()
}
})
</code>23. 組件的類型聲明（TypeScript）
用 TypeScript 能讓組件開發(fā)更規(guī)范、更易維護。
<code><script lang="ts" setup>
defineProps<{ label: string }>()
</script>
</code>24. 組件的單元測試
用 Vitest + Vue Test Utils：
<code>import { mount } from '@vue/test-utils'
import MyButton from './MyButton.vue'
test('emit click event', () => {
const wrapper = mount(MyButton, { props: { label: '點我' } })
wrapper.trigger('click')
expect(wrapper.emitted()).toHaveProperty('click')
})
</code>25. 組件開發(fā)注意事項
- 避免過度嵌套，保持組件層級清晰
- 保持 props 精簡，避免“大而全”組件
- 合理拆分業(yè)務(wù)邏輯到 composable
- 組件文檔和注釋要完善
二、動態(tài)加載組件實現(xiàn)
1. 基礎(chǔ)動態(tài)組件用法（<component :is="...">）
你可以通過 <component :is="組件名或組件對象"> 動態(tài)切換渲染不同的組件。
示例
假設(shè)有兩個組件：CompA.vue 和 CompB.vue。
CompA.vue
<template> <div>A 組件內(nèi)容</div> </template>
CompB.vue
<template> <div>B 組件內(nèi)容</div> </template>
App.vue
<template>
<div>
<button @click="current = 'CompA'">顯示A</button>
<button @click="current = 'CompB'">顯示B</button>
<component :is="current" />
</div>
</template>
<script setup>
import CompA from './CompA.vue'
import CompB from './CompB.vue'
import { ref } from 'vue'
const current = ref('CompA')
const components = { CompA, CompB }
</script>
<script>
export default {
components: { CompA, CompB }
}
</script>
注意：如果用
<script setup>，無需components選項，直接在模板里用變量名即可。
2. 異步組件（懶加載組件）
在大型項目中，為了優(yōu)化性能，可以按需懶加載組件。
Vue 3 推薦寫法
語法一：defineAsyncComponent
<template>
<component :is="AsyncComp" />
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./CompA.vue'))
</script>
動態(tài)切換多種異步組件
<template>
<button @click="current = 'A'">A</button>
<button @click="current = 'B'">B</button>
<component :is="asyncComponents[current]" />
</template>
<script setup>
import { defineAsyncComponent, ref } from 'vue'
const asyncComponents = {
A: defineAsyncComponent(() => import('./CompA.vue')),
B: defineAsyncComponent(() => import('./CompB.vue'))
}
const current = ref('A')
</script>
3. 動態(tài)組件的緩存（keep-alive）
如果你希望切換組件時緩存組件狀態(tài)，可以用 <keep-alive> 包裹：
<keep-alive> <component :is="current" /> </keep-alive>
4. 動態(tài)組件常見應(yīng)用場景
- Tab 切換
- 彈窗內(nèi)容切換
- 表單步驟切換
- 插件式頁面組件擴展
5. 總結(jié)
- 用
<component :is="...">動態(tài)渲染組件 - 用
defineAsyncComponent實現(xiàn)異步懶加載 - 可結(jié)合
<keep-alive>做緩存 - 結(jié)合業(yè)務(wù)靈活切換組件
6. 動態(tài)加載組件并傳遞參數(shù)（props）
你可以通過 v-bind 給動態(tài)組件傳遞不同的 props。
示例：
<template>
<component
:is="currentComp"
v-bind="currentProps"
/>
</template>
<script setup>
import { ref } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'
const currentComp = ref(CompA)
const currentProps = ref({ msg: 'Hello A' })
function switchToB() {
currentComp.value = CompB
currentProps.value = { msg: 'Hello B' }
}
</script>
7. 動態(tài)組件的事件監(jiān)聽
可以通過 v-on 監(jiān)聽動態(tài)組件發(fā)出的事件：
<template>
<component
:is="currentComp"
v-bind="currentProps"
v-on="currentEvents"
/>
</template>
<script setup>
import { ref } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'
const currentComp = ref(CompA)
const currentProps = ref({ msg: 'Hello A' })
const currentEvents = ref({
someEvent: (val) => { console.log('事件觸發(fā)', val) }
})
</script>
8. 動態(tài)組件與插槽結(jié)合
動態(tài)組件也可以使用插槽，父組件可根據(jù)需要傳遞內(nèi)容：
<template>
<component :is="currentComp">
<template #default>
<div>插槽內(nèi)容</div>
</template>
</component>
</template>
9. 動態(tài)組件的異步加載進階（帶加載/錯誤/超時處理）
defineAsyncComponent 支持配置 loading、error、timeout 等狀態(tài)：
<code>import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent({
loader: () => import('./CompA.vue'),
loadingComponent: LoadingComp,
errorComponent: ErrorComp,
delay: 200,
timeout: 3000,
})
</code>10. 動態(tài)組件的注冊方式
如果組件很多，可以用對象管理：
<code>const components = {
CompA: () => import('./CompA.vue'),
CompB: () => import('./CompB.vue'),
// ...
}
</code>然后在 <component :is="components[activeName]" /> 動態(tài)加載。
11. 動態(tài)組件的遞歸加載（樹形結(jié)構(gòu)）
適合渲染樹狀數(shù)據(jù)：
<TreeNode :node="rootNode" />
TreeNode 組件內(nèi)部遞歸調(diào)用自己。
12. 動態(tài)加載遠程組件（高級）
有些場景需要從后臺拉取組件代碼并動態(tài)渲染，可以結(jié)合 eval 或 new Function（安全性需考慮），或用微前端方案。
13. 動態(tài)表單、動態(tài)彈窗、動態(tài)頁面等場景
實際業(yè)務(wù)中，常見動態(tài)加載組件的場景有：
- 動態(tài)表單（表單項類型動態(tài)切換）
- 動態(tài)彈窗（彈窗內(nèi)容根據(jù)業(yè)務(wù)變化）
- 動態(tài)頁面（根據(jù)路由或配置渲染不同頁面）
14. 動態(tài)組件的性能優(yōu)化
- 異步加載減少首屏體積
- 結(jié)合
keep-alive緩存組件狀態(tài) - 按需注冊/銷毀組件，減少內(nèi)存占用
15. 小結(jié)
動態(tài)加載組件在 Vue 項目中非常常用，關(guān)鍵點包括：
<component :is="...">動態(tài)切換defineAsyncComponent實現(xiàn)懶加載- 支持 props、事件、插槽
- 進階場景支持 loading/error 處理
- 實際業(yè)務(wù)可用于 tab、彈窗、動態(tài)表單、微前端等
三、動態(tài)import組件
1. 動態(tài) import 組件的原理
import() 是 JavaScript 的原生動態(tài)導(dǎo)入語法，會返回一個 Promise，可以實現(xiàn)按需加載（懶加載）：
<code>const CompA = () => import('./CompA.vue')
</code>配合 Vue 的 <component :is="...">，就可以動態(tài)加載并顯示組件。
2. Vue 3 推薦用法：defineAsyncComponent
Vue 3 提供了 defineAsyncComponent 用于異步加載組件，支持 loading、error 等狀態(tài)。
<code>import { defineAsyncComponent } from 'vue'
const AsyncCompA = defineAsyncComponent(() => import('./CompA.vue'))
</code>3. 實戰(zhàn)：動態(tài) import 并顯示組件
1）準備兩個組件
CompA.vue
<template> <div>我是A組件</div> </template>
CompB.vue
<template> <div>我是B組件</div> </template>
2）父組件動態(tài)加載并顯示
App.vue
<template>
<button @click="show('A')">顯示A</button>
<button @click="show('B')">顯示B</button>
<component :is="currentComp" />
</template>
<script setup>
import { ref } from 'vue'
import { defineAsyncComponent } from 'vue'
const currentComp = ref(null)
function show(type) {
if (type === 'A') {
currentComp.value = defineAsyncComponent(() => import('./CompA.vue'))
} else if (type === 'B') {
currentComp.value = defineAsyncComponent(() => import('./CompB.vue'))
}
}
</script>
3）帶 loading、error 組件的動態(tài) import
<script setup>
import { defineAsyncComponent, ref } from 'vue'
import Loading from './Loading.vue'
import ErrorComp from './Error.vue'
const currentComp = ref(null)
function show(type) {
if (type === 'A') {
currentComp.value = defineAsyncComponent({
loader: () => import('./CompA.vue'),
loadingComponent: Loading,
errorComponent: ErrorComp,
delay: 200,
timeout: 3000
})
} else if (type === 'B') {
currentComp.value = defineAsyncComponent({
loader: () => import('./CompB.vue'),
loadingComponent: Loading,
errorComponent: ErrorComp,
delay: 200,
timeout: 3000
})
}
}
</script>
4. 總結(jié)
- 動態(tài) import 組件：
const Comp = () => import('./Comp.vue') - defineAsyncComponent：用于包裹異步組件
- ：動態(tài)顯示當前組件
- 支持 loading、error、自定義 props、事件等
5. 進階：動態(tài)組件注冊表
如果組件很多，可以用對象來管理：
<script setup>
import { defineAsyncComponent, ref } from 'vue'
const compMap = {
A: defineAsyncComponent(() => import('./CompA.vue')),
B: defineAsyncComponent(() => import('./CompB.vue')),
// 還可以繼續(xù)添加更多
}
const current = ref('A')
</script>
<template>
<button @click="current = 'A'">A</button>
<button @click="current = 'B'">B</button>
<component :is="compMap[current]" />
</template>6. 動態(tài) import 組件并傳遞 props
你可以通過 v-bind 給動態(tài)加載的組件傳遞參數(shù)：
<template>
<button @click="show('A')">顯示A</button>
<button @click="show('B')">顯示B</button>
<component :is="currentComp" v-bind="compProps" />
</template>
<script setup>
import { ref } from 'vue'
import { defineAsyncComponent } from 'vue'
const currentComp = ref(null)
const compProps = ref({ msg: '默認消息' })
function show(type) {
if (type === 'A') {
currentComp.value = defineAsyncComponent(() => import('./CompA.vue'))
compProps.value = { msg: '這是A組件的消息' }
} else if (type === 'B') {
currentComp.value = defineAsyncComponent(() => import('./CompB.vue'))
compProps.value = { msg: '這是B組件的消息' }
}
}
</script>
CompA.vue/CompB.vue
<template>
<div>{{ msg }}</div>
</template>
<script setup>
defineProps(['msg'])
</script>
7. 動態(tài) import 組件并綁定事件
可以通過 v-on 綁定事件到動態(tài)組件：
<template>
<component
:is="currentComp"
v-bind="compProps"
v-on="compEvents"
/>
</template>
<script setup>
import { ref } from 'vue'
import { defineAsyncComponent } from 'vue'
const currentComp = ref(null)
const compProps = ref({})
const compEvents = ref({
click: (val) => console.log('子組件點擊', val)
})
function showA() {
currentComp.value = defineAsyncComponent(() => import('./CompA.vue'))
compProps.value = { msg: 'A消息' }
}
</script>
8. 動態(tài) import 組件 + 緩存（keep-alive）
有些場景需要緩存已加載的組件狀態(tài)：
<template>
<keep-alive>
<component :is="currentComp" v-bind="compProps" />
</keep-alive>
</template>
9. 批量管理動態(tài)組件（組件注冊表）
當有很多可動態(tài)加載的組件時，可以用對象批量管理：
<script setup>
import { defineAsyncComponent, ref } from 'vue'
const compMap = {
A: defineAsyncComponent(() => import('./CompA.vue')),
B: defineAsyncComponent(() => import('./CompB.vue')),
C: defineAsyncComponent(() => import('./CompC.vue'))
}
const current = ref('A')
</script>
<template>
<button @click="current = 'A'">A</button>
<button @click="current = 'B'">B</button>
<button @click="current = 'C'">C</button>
<component :is="compMap[current]" />
</template>
10. 動態(tài) import 組件的 loading/error/超時處理
可以配置 loading/error 組件、延遲和超時：
<code>import { defineAsyncComponent } from 'vue'
import LoadingComp from './LoadingComp.vue'
import ErrorComp from './ErrorComp.vue'
const AsyncA = defineAsyncComponent({
loader: () => import('./CompA.vue'),
loadingComponent: LoadingComp,
errorComponent: ErrorComp,
delay: 200,
timeout: 3000
})
</code>11. 動態(tài) import 組件的實際業(yè)務(wù)場景
- 動態(tài)表單項：根據(jù)后端返回字段渲染不同表單組件。
- 彈窗內(nèi)容切換：彈窗內(nèi)容按需動態(tài)加載。
- Tab 頁切換：每個 Tab 對應(yīng)一個動態(tài)加載的組件。
- 插件式頁面：根據(jù)配置或權(quán)限動態(tài)加載頁面模塊。
12. 動態(tài) import 組件的性能優(yōu)化建議
- 大型項目建議所有頁面/彈窗/Tab 都用異步組件，減少首屏包體積。
- 可結(jié)合路由懶加載，提升體驗。
- 頻繁切換的組件用
<keep-alive>緩存，減少重復(fù)初始化。
13. 動態(tài) import 組件的完整案例（匯總）
<template>
<div>
<button @click="show('A')">A</button>
<button @click="show('B')">B</button>
<keep-alive>
<component
:is="currentComp"
v-bind="compProps"
v-on="compEvents"
/>
</keep-alive>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { defineAsyncComponent } from 'vue'
const currentComp = ref(null)
const compProps = ref({})
const compEvents = ref({
click: (val) => console.log('事件', val)
})
function show(type) {
if (type === 'A') {
currentComp.value = defineAsyncComponent(() => import('./CompA.vue'))
compProps.value = { msg: 'A消息' }
} else if (type === 'B') {
currentComp.value = defineAsyncComponent(() => import('./CompB.vue'))
compProps.value = { msg: 'B消息' }
}
}
</script>總結(jié)
到此這篇關(guān)于VUE如何實現(xiàn)前端組件式開發(fā)和動態(tài)裝載的文章就介紹到這了,更多相關(guān)VUE前端組件式開發(fā)和動態(tài)裝載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了如何在前端和后端實現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們詳細介紹了數(shù)據(jù)準備、關(guān)系映射、點擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09
vue3父子組件數(shù)據(jù)更新不及時的問題解決方案
文章介紹了在使用props向子組件傳值時,如果直接賦值不會導(dǎo)致子組件數(shù)據(jù)更新的問題,文章提供了解決方案,通過在父組件中使用 nextTick確保數(shù)據(jù)變化后再調(diào)用子組件中的接口,從而保證數(shù)據(jù)同步更新,感興趣的朋友跟隨小編一起看看吧2025-12-12
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-cli3在main.js中console.log()會報錯的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了Vue預(yù)覽圖片和視頻的幾種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
解決vue js IOS H5focus無法自動彈出鍵盤的問題
今天小編就為大家分享一篇解決vue js IOS H5focus無法自動彈出鍵盤的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在日常開發(fā)中,我們經(jīng)常會遇到需要錄制音頻的場景,比如在線會議、語音筆記、教學(xué)錄制等,傳統(tǒng)的音頻錄制通常只能捕獲麥克風(fēng)輸入,但在某些場景下,我們可能需要錄制系統(tǒng)音頻,所以本文就來實現(xiàn)一個基于Vue3 Composition API的屏幕音頻捕獲Hook,需要的朋友可以參考下2025-11-11
Vue3實現(xiàn)微信支付寶PC端支付的步驟(附實例代碼)
因為公司項目涉及到充值功能所以做了支付寶、微信的支付功能,這篇文章主要介紹了Vue3實現(xiàn)微信支付寶PC端支付的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-09-09
這篇文章主要介紹了Vue學(xué)習(xí)筆記分享之Vue組件化編程,文中把知識點都一一羅列出來了,方便整理學(xué)習(xí),需要的朋友可以參考下2023-03-03