解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題
更新時間：2020年07月30日 14:52:41 作者：checkMa
這篇文章主要介紹了解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
需求
最近公司有個大屏展示項目（如下圖）
頁面的元素需要做響應(yīng)式監(jiān)聽，圖表需要跟著窗口響應(yīng)變化
問題
每一個圖表都被我寫成了一個組件，然后就在每一個組件里寫了一串代碼，監(jiān)聽瀏覽器變化
結(jié)果只有父組件的代碼生效
mounted(){
window.onresize = () => { //當(dāng)窗口發(fā)生改變時觸發(fā)
//
};
}
原因
經(jīng)簡單測試后發(fā)現(xiàn)，同一個路由頁面只能注冊一次瀏覽器窗口監(jiān)聽事件，第二次注冊的會覆蓋第一次注冊
下邊代碼即可測試
mounted(){
window.onresize = () => { //當(dāng)窗口發(fā)生改變時觸發(fā)
console.log(1)
};
window.onresize = () => { //當(dāng)窗口發(fā)生改變時觸發(fā) （會覆蓋上一個函數(shù)）
console.log(2)
};
}
父子嵌套組件同理，子組件生命周期執(zhí)行在父組件之前，父組件函數(shù)會覆蓋子組件函數(shù)
解決方案
1、只在父頁面寫個監(jiān)聽，但是通過組件傳值的方式傳給子組件，并且子組件用watch監(jiān)聽傳值的變化，響應(yīng)改變
2、假如是多層組件嵌套，用vuex可能會更省力
補充知識：vue/組件嵌套/無限嵌套/嵌套組件消息傳遞/嵌套父子組件傳值
目前接到一個需求，是我之前從來沒有實踐過的，正好趁此機會做一個深度剖析，并記錄下這次的成長，并分享給大家。
需求文檔
一 、（一個廠商編號和一個版本號）唯一決定一個配置
二 、 配置內(nèi)容支持無限嵌套
三、配置數(shù)據(jù)格式示例（配置包括項和模塊）：
{
"vendorId": "IL03#sub_01",
"version": "9.0.0",
"config": {
"module-1": {
"property-1": "value-1",
"property-2": "value-2",
"property-3": "value-3",
"module-1_1": {
"property-1_1": "value-1_1",
"property-1_2": "value-1_2",
"property-1_3": "value-1_3"
}
},
"module-2": {
"property-4": "value-4",
"property-5": "value-5"
}
}
}
四、配置成果物如下：
需求分解
一個簡單的嵌套組件：
<template>
<div>
<span>{{data.content}}<span>
<div>
<nested :data="data.child"></nested>
<div>
</div>
</template>
<script>
export default {
name: 'nested'，
props: ['data']
}
</script>
我們給最外層的組件（根嵌套組件）綁定形如
{
"content": "value",
"child": {
"content": "value-1"
"child": {
"content": "value-1_1"
......
}
}
}
的數(shù)據(jù)結(jié)構(gòu)，就可以看見效果了，是不是和我們前面需求的數(shù)據(jù)結(jié)構(gòu)很像？
開始動工
step1：最外層列表展示
這里作為靜態(tài)路由頁面展示即可（分頁、查詢、刪除功能在這里做）
<!-- 這里使用了EL-UI -->
<template>
<!-- 應(yīng)用配置入口 -->
<div class="app-config-wrap">
<!-- 增 -->
<div class="app-config-add">
<el-button type="primary" size="mini" @click="handleClickAdd">新增配置</el-button>
</div>
<!-- 查 -->
<div class="app-config-search">
<div class="label" @click="isShowFilter = !isShowFilter">
<span class="text">查詢App配置</span>
<span class="el-icon-caret-right" v-if="!isShowFilter"></span>
<span class="el-icon-caret-bottom" v-else></span>
</div>
<div class="clear-all" @click="handleClearAll" v-if="isShowFilter" title="點擊清空所有查詢條件">
<span class="text">清空條件</span>
</div>
<div class="form-wrap" v-show="isShowFilter">
<div class="by-vendorId">
<el-input type="text" size="mini" placeholder="按廠商編號查詢" clearable v-model.trim="vendorId">
</el-input>
</div>
<div class="by-version">
<el-input type="text" size="mini" placeholder="按版本號查詢" clearable v-model.trim="version">
</el-input>
</div>
<div class="search-button">
<el-button type="primary" size="mini" @click="handleClickSearch">查 詢</el-button>
</div>
</div>
</div>
<div class="app-config-main" :style="tableHeight">
<el-table size="mini" height="100%" :data="configList" stripe @row-click="handleClickRow"
highlight-current-row style="width: 100%;">
<el-table-column type="index" label="No." width="60"></el-table-column>
<el-table-column prop="vendorId" label="廠商編號" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="version" label="版本號" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="operation" label="操作">
<template slot-scope="scope">
<!-- 刪 -->
<el-button type="danger" size="mini" @click="handleClickDelete(scope.row.id)">刪除配置</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination class="pagination" v-if="total" background small :current-page="pageNum"
:page-sizes="[10, 20, 40, 60]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="parseInt(total)" @current-change="changePageNo" @size-change="changePageSize">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'appConfig',
components: {},
props: [],
data () {
return {
isShowFilter: false,
vendorId: '',
version: '',
pageNum: 1,
pageSize: 20,
total: 0,
configList: [{ // 假數(shù)據(jù)
id: 1,
vendorId: 'cjm',
version: '10.0.0'
}]
}
},
computed: {
tableHeight () {
return this.isShowFilter ? { height: 'calc(100% - 129px)' } : { height: 'calc(100% - 90px)' }
}
},
methods: {
handleClearAll () {
this.vendorId = ''
this.version = ''
},
handleClickSearch () { // 這里發(fā)送查詢請求
},
changePageNo (val) { // 這里發(fā)送分頁請求
this.pageNum = val
},
changePageSize (val) { // 這里發(fā)送分頁請求
this.pageSize = val
},
handleClickDelete (id) { // 這里發(fā)送刪除請求
},
handleClickAdd () { // 使用路由方式跳轉(zhuǎn)到配置頁面（增加配置和修改配置同一頁面即可）
this.$router.push({
name: 'configData',
query: {}
})
},
handleClickRow (row) { // 通過id讓配置頁面初始化時請求數(shù)據(jù)，在跳轉(zhuǎn)頁面中watch即可
this.$router.push({
name: 'configData',
query: {
id: row.id
}
})
}
}
}
</script>
// 樣式我就不貼了，節(jié)省篇幅
step2:動態(tài)路由頁準(zhǔn)備
由于配置頁面展示是根據(jù)廠商編號和版本號動態(tài)改變的，所以這里用到
this.$router.push({
name: 'configData',
query: {
id: row.id
}
})
來實現(xiàn)動態(tài)路由頁面，這里也需要引入我們的根嵌套組件（嵌套入口）。
<template>
<div class="config-data-warp">
<div class="config-head">
<span class="text">廠商編號：</span>
<el-input class="config-input" type="text" size="mini" placeholder="廠商編號"
clearable v-model.trim="vendorId">
</el-input>
</div>
<div class="config-head">
<span class="text">版本號：</span>
<el-input class="config-input" type="text" size="mini" placeholder="版本號"
clearable v-model.trim="version">
</el-input>
</div>
<div class="config-main">
<config-module :data="config" :root="true"
:commit="commit" @commit="handlerCommit"></config-module>
</div>
<el-button class="config-commit-btn" type="primary"
size="mini" @click="commit = true">確認(rèn)提交</el-button>
</div>
</template>
<script>
import configModule from './configModule'
export default {
name: 'configData',
components: {configModule},
data () {
return {
id: this.$route.id,
commit: false,
vendorId: '',
version: '',
config: {} // 這里放點假數(shù)據(jù)
}
},
mounted () { // 如果id存在，就去請求數(shù)據(jù)
if (id) { ... }
},
methods: {
handlerCommit (data) { // 這里是匯總數(shù)據(jù)的地方，記下來，等下提到了好找
console.log(data)
this.commit = false
}
}
}
</script>
值得注意的是，確認(rèn)提交按鈕只是將commit變量置為true，而commit綁定在我們的嵌套組件中。
<div class="config-children" v-for="(value, index) in configJsonChildren" :key="index + 'child' + moduleName">
<config-module :index="index" @change="changeChildName" @commit="handlerCommit"
:commit="commit" :data="{key: value[0], child: value[1]}"></config-module>
</div>
這是嵌套組件的部分代碼，我們可以看到commit被原封不動的傳遞給了子嵌套組件，也就是說，這里的commit變量起到通知所有嵌套組件執(zhí)行了提交動作，這也是父組件控制子組件組件的唯一方式——傳遞數(shù)據(jù)變化props（或者使用vuex也可以）。
這里還有一點，就是定義什么是嵌套部分，什么是嵌套外部分，顯然，廠商編號和版本號不屬于嵌套部分。
還有傳入的root變量，是為了控制根嵌套組件的名稱不可修改，所以傳個true就可以了。
step3：嵌套組件的實現(xiàn)（重點）
這里梳理一下嵌套組件需要提供的功能點：
1、能夠做到傳入數(shù)據(jù)的展示
2、能夠動態(tài)添加項和模塊
3，能夠?qū)⑿薷牧说臄?shù)據(jù)傳遞出去
傳入數(shù)據(jù)的展示
我們再回過頭看看后臺傳給我們的數(shù)據(jù)格式：
{
"vendorId": "IL03#sub_01",
"version": "9.0.0",
"config": {
"module-1": {
"property-1": "value-1",
"property-2": "value-2",
"property-3": "value-3",
"module-1_1": {
"property-1_1": "value-1_1",
"property-1_2": "value-1_2",
"property-1_3": "value-1_3"
}
},
"module-2": {
"property-4": "value-4",
"property-5": "value-5"
}
}
}
從中我們是否可以提煉出每個嵌套組件的數(shù)據(jù)格式？
module: {
property-1: value-1,
property-2: value-2,
......
module-1: { ...... },
mpdule-2: { ...... },
......
}
而且，我們需要這個對象的key和value是可以被雙向綁定的。
可是我們想一下，對象的key可以雙向綁定嗎？顯然不能！
這也就是說，原始傳入的數(shù)據(jù)結(jié)構(gòu)并不能用，需要進行處理：
<template>
<div class="config-module-warp">
<div class="config-head">
<!-- 根組件固定模塊名，或者說不需要模塊名 -->
<span class="config-header-item" v-if="root">配置：</span>
<div class="config-header-item" v-else>
<el-input class="config-module-name" type="text" size="mini"
placeholder="模塊名" clearable v-model="moduleName" @change="changeModuleName"></el-input>
</div>
<el-button class="config-header-item" type="primary" size="mini"
@click="handleClickAddProperty">新增項</el-button>
<el-button class="config-header-item" type="primary" size="mini"
@click="handleClickAddModule">新增模塊</el-button>
<el-button v-if="root" class="config-btn" type="danger" size="mini"
@click="handleClickClear">清空配置</el-button>
<el-button v-else class="config-btn" type="danger" size="mini"
@click="handleClickDeleteModule">刪除模塊</el-button>
<div class="config-property" v-for="(value, index) in configJsonProperty"
:key="index + 'property'">
<el-input class="config-property-value" type="text" size="mini"
placeholder="key" clearable v-model="value[0]"></el-input> :
<el-input class="config-property-value" type="text" size="mini"
placeholder="value" clearable v-model="value[1]"></el-input>
<el-button class="config-header-item" type="danger" size="mini"
@click="handleClickDeleteProperty(index)">刪除該項</el-button>
</div>
<div class="config-children" v-for="(value, index) in configJsonChildren"
:key="index + 'child'">
<config-module :index="index" @change="changeChildName" @commit="handlerCommit"
:commit="commit" :data="{key: value[0], child: value[1]}"></config-module>
</div>
</div>
</template>
...
data () {
return {
moduleName: '', // 綁定當(dāng)前子模塊名
configJsonProperty: [], // 這里是子模塊的property
configJsonChildren: [], // 這里是子模塊下的子模塊（孖模塊^-^）
...
}
}
...
mounted () {
if (this.data && this.root) {
// 由于根節(jié)點是沒有模塊名的，數(shù)據(jù)的解析結(jié)構(gòu)是{key: moduleName, child: moduleValue}，參上。
this.classify({child: this.data})
} else if (this.data) {
this.classify(this.data)
}
}
// 或者將引用根組件的地方改成下面這樣也可以：
// <config-module :data="{child: config}" :root="true" :commit="commit"
// @commit="handlerCommit"></config-module>
// _____________________________________
// mounted () {
// if (this.data) {
// this.classify(this.data)
// }
// }
...
classify (prop) {
let data = prop.child
this.moduleName = prop.key
for (let key in data) {
if (typeof data[key] === 'object') {
this.configJsonChildren.push([ // 這里將數(shù)組轉(zhuǎn)化為可以雙向綁定的二維數(shù)組
key,
data[key]
])
} else {
this.configJsonProperty.push([
key,
data[key]
])
}
}
}
實現(xiàn)動態(tài)增加
只需要添加空項就行了，但由于模塊是由父組件傳入的，所以改變模塊名也需要同步改變父組件的模塊名，而這里就用到了props中的index，代表父組件中的位置。
handleClickAddProperty () {
this.configJsonProperty.push([
'',
''
])
},
handleClickAddModule () {
this.configJsonChildren.push([
'',
{}
])
}，
changeModuleName (value) {
this.$emit('change', this.index, value)
},
changeChildName (index, name) {
this.$set(this.configJsonChildren[index], 0, name)
},
孿生兄弟：動態(tài)刪除
其實，增加數(shù)據(jù)和刪除數(shù)據(jù)無外乎就是，本地數(shù)據(jù)本地改，外部數(shù)據(jù)同步改：
handleClickClear () {
// 如果本身就是空，就無需操作，防止誤操作，畢竟我挺討厭彈窗的
if (!this.configJsonProperty.length && !this.configJsonChildren.length) {
return
}
// 敏感操作給個彈窗
this.$confirm('確定清空所有配置?', '警告', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 這個是本地觸發(fā)的哦！
this.configJsonProperty = []
this.configJsonChildren = []
})
},
handleClickDeleteProperty (index) { // 本地數(shù)據(jù)本地改
this.configJsonProperty.splice(index, 1)
},
handleClickDeleteModule () {
// 外部數(shù)據(jù)傳出改，由于是刪除操作，外部銷毀了會直接導(dǎo)致本地銷毀，本地?zé)o需再銷毀
// 和改模塊名不一樣
// 改模塊名時，雖然外部數(shù)據(jù)改變觸發(fā)了本地更新，但由于是push操作，并不會改變本地數(shù)據(jù)
this.$emit('delete', this.index)
},
deleteModule (index) {
// 與handleClickDeleteProperty方法比較，一定要分清哪個是子組件觸發(fā)，哪個是父組件觸發(fā)
this.configJsonChildren.splice(index, 1)
},
重中之重：提取這個樹結(jié)構(gòu)中的數(shù)據(jù)
數(shù)據(jù)在各個子組件中保存，怎么把它們提取出來呢？
聰明的你肯定馬上想到了我之前所說的commit變量吧，它將這個動作分發(fā)到了各個子組件。
所以，只要每個子組件聽從命令，把數(shù)據(jù)層層上報，是不是就完成了呢？
這就好比是公司總經(jīng)理想要開發(fā)一個軟件，他就只要告訴各個部門：
哎，你們軟件部負(fù)責(zé)做出軟件可行性方案；
你們市場部負(fù)責(zé)調(diào)查同類軟件和市場份額；
你們營銷部趕快出爐軟件推廣方案，等等。
然后部門總監(jiān)給各項目經(jīng)理發(fā)小人物，然后項目經(jīng)理再分解任務(wù)成需求給你。
最后做完了，流程就是：你 -》經(jīng)理-》總監(jiān)-》總經(jīng)理。
在我們這份代碼中，也是這樣子的：
第一步：你要知道任務(wù)來了：
watch: {
commit (val) {
if (val) {
this.handleClickCommit() // 接到任務(wù)
} else {
this.commitData = {} // 這里也標(biāo)記一下
}
}
},
第一步：找到最底層的“你”，也就是找到這個樹組件的末梢節(jié)點，
它的標(biāo)志是：
if (!this.configJsonChildren.length) { ...... } // 他沒有子節(jié)點了
d收集它的“工作成果”：
let obj = {}
this.configJsonProperty.forEach(v => {
if (v[0] && v[1]) {
obj[v[0]] = v[1]
} else {
this.$emit('error') // 如果有項不完整，可以報錯
}
})
你覺得上面代碼有沒有小問題？給你五秒想一想。
1
2
3
4
5
有沒有這樣一種情況？我們一不注意寫了兩個同樣鍵名的項，不管是寫到了錯的模塊里面還是怎樣。
那么在上面的代碼中，就會使得新值覆蓋舊值，就有可能導(dǎo)致嚴(yán)重的事故?。?！
所以我們改成：
handleClickCommit () {
if (!this.configJsonChildren.length) {
if (!this.moduleName && !this.root) {
this.$emit('error')
return
}
let obj = {}
for (let v of this.configJsonProperty) {
if (v[0] && v[1]) {
if (obj.hasOwnProperty(v[0])) {
this.$emit('error') // 啊，一不小心走神了
return
}
obj[v[0]] = v[1]
} else {
this.$emit('error')
// 這里不需要return是因為不會造成嚴(yán)重后果，當(dāng)然也可以加上
// 主要是我用這個功能時會一口氣添加好多項，也不一定全填滿，省得一個個刪。
}
}
this.$emit('commit', { // 把數(shù)據(jù)給經(jīng)理?。?！這個殺千刀的，天天催！
key: this.moduleName, // 身份狗牌
value: obj
})
}
}
啊，工作終于提交了，再也不擔(dān)心了，接下來的事就交給經(jīng)理去做吧！
經(jīng)理：我手下管著這么多人，不可能來一個我上交一個吧？那就等他們?nèi)可辖涣?，我再整個打包上交吧。
首先第一步，我需要一個箱子來存他們的成果：
data () {
return {
moduleName: '',
configJsonProperty: [],
configJsonChildren: [],
commitData: {} // 存放成果的箱子
}
}
接下來就等他們上交了：
handlerCommit (data) {
if (!this.moduleName && !this.root) { // 領(lǐng)導(dǎo)也要有名字,但總經(jīng)理只有一個
this.$emit('error')
return
}
this.commitData[data.key] = data.value // 先按人頭收下成果
for (let item of this.configJsonChildren) {
if (!this.commitData.hasOwnProperty(item[0])) return // 如果沒收齊，繼續(xù)等待
}
// 歐耶，收齊了
let obj = {}
for (let v of this.configJsonProperty) { // 這個for循環(huán)可以封成一個函數(shù)的，畢竟寫了兩次
if (v[0] && v[1]) {
if (obj.hasOwnProperty(v[0])) {
this.$emit('error')
return
}
obj[v[0]] = v[1]
} else {
this.$emit('error')
}
}
this.$emit('commit', {
key: this.moduleName,
value: Object.assign(obj, this.commitData) // 領(lǐng)導(dǎo)自己的成果加上員工的成果
})
}
還記得上面我讓你記下的地方嗎？
handlerCommit (data) {
console.log(data) // 匯總數(shù)據(jù)，在這里可以發(fā)送給后臺了
this.commit = false // 任務(wù)完成標(biāo)志
}
watch: {
commit (val) {
if (val) {
this.handleClickCommit()
} else {
this.commitData = {} // 初始化子組件
}
}
},
到這里，嵌套組件也大致完工了，貼全代碼：
<template>
<div class="config-module-warp">
<div class="config-head">
<span class="config-btn" v-if="root">配置：</span>
<div class="config-btn" v-else>
<el-input class="config-module-name" type="text" size="mini" placeholder="模塊名"
clearable v-model="moduleName" @change="changeModuleName"></el-input>
</div>
<el-button class="config-btn" type="primary" size="mini"
@click="handleClickAddProperty">新增項</el-button>
<el-button class="config-btn" type="primary" size="mini"
@click="handleClickAddModule">新增模塊</el-button>
<el-button v-if="root" class="config-btn" type="danger" size="mini"
@click="handleClickClear">清空配置</el-button>
<el-button v-else class="config-btn" type="danger" size="mini"
@click="handleClickDeleteModule">刪除模塊</el-button>
</div>
<div class="config-property" v-for="(value, index) in configJsonProperty" :key="index + 'property'">
<el-input class="config-property-value" type="text" size="mini"
placeholder="key" clearable v-model="value[0]"></el-input> :
<el-input class="config-property-value" type="text" size="mini"
placeholder="value" clearable v-model="value[1]"></el-input>
<el-button class="config-btn" type="danger" size="mini"
@click="handleClickDeleteProperty(index)">刪除該項</el-button>
</div>
<div class="config-children" v-for="(value, index) in configJsonChildren" :key="index + 'child'">
<config-module :index="index" @change="changeChildName" @delete="deleteModule"
@commit="handlerCommit" :commit="commit" :data="{key: value[0], child: value[1]}"></config-module>
</div>
</div>
</template>
<script>
export default {
name: 'configModule',
props: ['data', 'root', 'commit', 'index'],
data () {
return {
moduleName: '',
configJsonProperty: [],
configJsonChildren: [],
commitData: {},
error: false
}
},
watch: {
commit (val) {
if (val) {
this.handleClickCommit()
} else {
this.commitData = {}
this.error = false
}
}
},
computed: {
},
mounted () {
if (this.data) {
this.classify(this.data)
}
},
methods: {
classify (prop) {
let data = prop.child
this.moduleName = prop.key
for (let key in data) {
if (typeof data[key] === 'object') {
this.configJsonChildren.push([
key,
data[key]
])
} else {
this.configJsonProperty.push([
key,
data[key]
])
}
}
},
handleClickAddProperty () {
this.configJsonProperty.push([
'',
''
])
},
handleClickAddModule () {
this.configJsonChildren.push([
'',
{}
])
},
handleClickClear () {
if (!this.configJsonProperty.length && !this.configJsonChildren.length) {
return
}
this.$confirm('確定清空所有配置?', '警告', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.configJsonProperty = []
this.configJsonChildren = []
})
},
handleClickDeleteProperty (index) {
this.configJsonProperty.splice(index, 1)
},
handleClickDeleteModule () {
this.$emit('delete', this.index)
},
deleteModule (index) {
this.configJsonChildren.splice(index, 1)
},
changeModuleName (value) {
this.$emit('change', this.index, value)
},
changeChildName (index, name) {
this.$set(this.configJsonChildren[index], 0, name)
},
handleClickCommit () {
if (!this.configJsonChildren.length) {
if (!this.moduleName && !this.root) {
this.$emit('error')
return
}
let obj = {}
for (let v of this.configJsonProperty) {
if (v[0] && v[1]) {
if (obj.hasOwnProperty(v[0])) {
this.$emit('error')
return
}
obj[v[0]] = v[1]
} else {
this.$emit('error')
}
}
this.$emit('commit', {
key: this.moduleName,
value: obj
})
}
},
handlerCommit (data) {
if (!this.moduleName && !this.root) {
this.$emit('error')
return
}
this.commitData[data.key] = data.value
for (let item of this.configJsonChildren) {
if (!this.commitData.hasOwnProperty(item[0])) return
}
let obj = {}
for (let v of this.configJsonProperty) {
if (v[0] && v[1]) {
if (obj.hasOwnProperty(v[0])) {
this.$emit('error')
return
}
obj[v[0]] = v[1]
} else {
this.$emit('error')
}
}
this.$emit('commit', {
key: this.moduleName,
value: Object.assign(obj, this.commitData)
})
}
}
}
</script>
總結(jié)
其實聰明的人根本就不需要我總結(jié)嘛，代碼是最好的語言
所以這里我提出一些我的不足和沒做完的部分，不過都是細(xì)枝末節(jié)啦：
第一個是錯誤的處理，我這邊沒有加上
第二個是模塊應(yīng)該有折疊功能，不然配置多看著就眼花繚亂，
不過v-show的使用大家應(yīng)該也是登峰造極了。
然后，大家有什么意見和建議都可以在下方反饋。
感謝大家看完這一篇長文，么么噠~希望能給大家一個參考，也希望大家多多支持腳本之家
相關(guān)文章
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中監(jiān)聽路由參數(shù)的變化,給大家介紹了vue中監(jiān)聽路由參數(shù)變化的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
件間傳參是vue開發(fā)過程中一個很常見的應(yīng)用,對于我們后端開發(fā)來說,每次看到這種組件傳參的代碼就一頭霧水,下面這篇文章主要給大家介紹了關(guān)于VUE3傳值相關(guān)的6種方法,需要的朋友可以參考下2023-04-04
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點擊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue和webpack項目構(gòu)建過程常用的npm命令詳解
本文通過實例代碼給大家介紹了vue和webpack項目構(gòu)建過程常用的npm命令,需要的朋友可以參考下2018-06-06
vue elementUI 表單校驗功能之?dāng)?shù)組多層嵌套
這篇文章主要介紹了vue elementUI 表單校驗（數(shù)組多層嵌套）功能的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
nuxt 服務(wù)器渲染動態(tài)設(shè)置 title和seo關(guān)鍵字的操作
這篇文章主要介紹了nuxt 服務(wù)器渲染動態(tài)設(shè)置 title和seo關(guān)鍵字的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)給特殊字段設(shè)置插槽,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以學(xué)習(xí)一下2023-09-09