Vue?組件之間傳值的主要方法
一、Vue 組件之間傳值的主要方法
Vue 3 對(duì)于組件之間傳遞值的基本思想與 Vue 2 相似，但是有一些語法和 API 上的改變，主要的傳值方法有以下幾種：
1、父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然后在父組件中通過 v-bind 綁定相應(yīng)的數(shù)據(jù)來傳遞數(shù)據(jù)。
2、子組件向父組件傳值，使用 $emit：可以通過在子組件中使用 $emit 觸發(fā)自定義事件，并在父組件中使用 v-on 監(jiān)聽相應(yīng)的事件來傳遞數(shù)據(jù)。
3、兄弟組件之間傳值：可以通過使用一個(gè)共同的父組件，然后將需要共享的數(shù)據(jù)放在父組件的 data 中，再通過 props 將數(shù)據(jù)傳遞給各自的子組件。
4、跨級(jí)組件傳值，使用 provide 和 inject（同樣適用于父子組件傳值）：provide 可以在祖先組件中定義一個(gè)值或者方法，然后在子孫組件中使用 inject 來注入這個(gè)值或者方法。
5、使用全局事件總線：可以使用 Vue 的事件機(jī)制，通過在 Vue 實(shí)例上使用 $on 來監(jiān)聽事件，然后在其他組件中使用 $emit 觸發(fā)相應(yīng)的事件來傳遞數(shù)據(jù)。這種方式可以在任意組件之間傳遞數(shù)據(jù)。
6、使用 Vuex：當(dāng)應(yīng)用的數(shù)據(jù)狀態(tài)比較復(fù)雜或者需要在多個(gè)組件之間共享時(shí)，可以使用 Vuex，它是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式?？梢栽谌魏谓M件中訪問和修改 Vuex 存儲(chǔ)的數(shù)據(jù)，通過 mutations 來修改狀態(tài)，通過 actions 來觸發(fā) mutations。這種方式可以方便地在不同的組件中進(jìn)行狀態(tài)管理和數(shù)據(jù)共享。
7、使用 $attrs 和 $listeners，$attrs 和 $listeners 是常用的兩個(gè)特殊屬性，它們可以用來向組件傳遞屬性和事件監(jiān)聽器。
8、使用 $refs：可以使用 Vue 提供的 $refs 屬性來獲取組件實(shí)例，然后通過調(diào)用組件的方法來進(jìn)行數(shù)據(jù)傳遞。這種方式不推薦使用，因?yàn)椴灰拙S護(hù)和調(diào)試。
9、使用事件總線庫(kù)：可以使用 Vue.js 的第三方庫(kù)如 Event Bus、Tiny-Emmiter 等來傳遞數(shù)據(jù)。這些庫(kù)提供了一種方便、簡(jiǎn)單的方式來在不同的組件之間進(jìn)行事件傳遞。但是需要注意，使用第三方庫(kù)可能會(huì)增加項(xiàng)目的復(fù)雜性和維護(hù)成本。
二、Vue 2 組件之間傳值示例代碼
1、父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然后在父組件中通過 v-bind 綁定相應(yīng)的數(shù)據(jù)來傳遞數(shù)據(jù)。
父組件中的代碼：
<template>
<div>
<child-component :prop-a="dataA"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
dataA: 'data from parent',
};
},
};
</script>子組件中的代碼：
<template>
<div>
{{ propA }}
</div>
</template>
<script>
export default {
props: {
propA: String,
},
};
</script>
<template>
<div>
{{ propA }}
</div>
</template>
<script>
export default {
props: {
propA: String,
},
};
</script>2、子組件向父組件傳值，使用 $emit：可以通過在子組件中使用 $emit 觸發(fā)自定義事件，并在父組件中使用 v-on 監(jiān)聽相應(yīng)的事件來傳遞數(shù)據(jù)。
子組件中的代碼：
<template>
<div>
<button @click="sendDataToParent">Send Data To Parent</button>
</div>
</template>
<script>
export default {
data() {
return {
dataB: 'data from child',
};
},
methods: {
sendDataToParent() {
this.$emit('send-data', this.dataB);
},
},
};
</script>父組件中的代碼：
<template>
<div>
<child-component @send-data="receiveDataFromChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
receiveDataFromChild(dataB) {
console.log(dataB);
},
},
};
</script>3、兄弟組件之間傳值：可以通過使用一個(gè)共同的父組件，然后將需要共享的數(shù)據(jù)放在父組件的 data 中，再通過 props 將數(shù)據(jù)傳遞給各自的子組件。
父組件中的代碼：
<template>
<div>
<child-a :prop-a="dataA"></child-a>
<child-b :prop-b="dataB"></child-b>
</div>
</template>
<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';
export default {
components: {
ChildA,
ChildB,
},
data() {
return {
dataA: 'data from parent to child a',
dataB: 'data from parent to child b',
};
},
};
</script>子組件 A 中的代碼：
<template>
<div>
{{ propA }}
</div>
</template>
<script>
export default {
props: {
propA: String,
},
};
</script>子組件 B 中的代碼：
<template>
<div>
{{ propB }}
</div>
</template>
<script>
export default {
props: {
propB: String,
},
};
</script>4、跨級(jí)組件傳值，使用 provide 和 inject（該方法也可用于父子組件傳值）：provide 可以在祖先組件中定義一個(gè)值或者方法，然后在子孫組件中使用 inject 來注入這個(gè)值或者方法。
祖先組件中的代碼：
<template>
<div>
<child-a></child-a>
</div>
</template>
<script>
import ChildA from './ChildA.vue';
export default {
components: {
ChildA,
},
provide() {
return {
sharedData: 'data from ancestor',
};
},
};
</script>子孫組件 A 中的代碼：
<template>
<div>
{{ sharedData }}
</div>
</template>
<script>
export default {
inject: ['sharedData'],
};
</script>5、使用全局事件總線：可以使用 Vue 的事件機(jī)制，通過在 Vue 實(shí)例上使用 $on 來監(jiān)聽事件，然后在其他組件中使用 $emit 觸發(fā)相應(yīng)的事件來傳遞數(shù)據(jù)。這種方式可以在任意組件之間傳遞數(shù)據(jù)。
在 main.js 中定義一個(gè)空的 Vue 實(shí)例作為事件總線：
import Vue from 'vue'; export const bus = new Vue();
子組件 A 中的代碼：
<template>
<div>
<button @click="sendDataToSibling">Send Data To Sibling</button>
</div>
</template>
<script>
import { bus } from './main';
export default {
methods: {
sendDataToSibling() {
bus.$emit('send-data', 'data from child a');
},
},
};
</script>子組件 B 中的代碼：
<template>
<div>
{{ dataFromSibling }}
</div>
</template>
<script>
import { bus } from './main';
export default {
data() {
return {
dataFromSibling: '',
};
},
mounted() {
bus.$on('send-data', (data) => {
this.dataFromSibling = data;
});
},
};
</script>6、使用 Vuex：當(dāng)應(yīng)用的數(shù)據(jù)狀態(tài)比較復(fù)雜或者需要在多個(gè)組件之間共享時(shí)，可以使用 Vuex，它是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式?？梢栽谌魏谓M件中訪問和修改 Vuex 存儲(chǔ)的數(shù)據(jù)，通過 mutations 來修改狀態(tài)，通過 actions 來觸發(fā) mutations。這種方式可以方便地在不同的組件中進(jìn)行狀態(tài)管理和數(shù)據(jù)共享。
在 store.js 中定義一個(gè) Vuex store：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
dataC: 'data from Vuex',
},
mutations: {
updateDataC(state, payload) {
state.dataC = payload;
},
},
});
export default store;子組件 A 中的代碼：
<template>
<div>
<button @click="sendDataToSibling">Send Data To Sibling</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['updateDataC']),
sendDataToSibling() {
this.updateDataC('data from child a');
},
},
};
</script>子組件 B 中的代碼：
<template>
<div>
{{ dataC }}
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['dataC']),
},
};
</script>7、父子組件傳值，使用 $attrs 和 $listeners：
$attrs 是一個(gè)包含了父組件傳遞給子組件的所有屬性的對(duì)象，可以在子組件中通過訪問 $attrs 來獲取這些屬性。如果不希望某些屬性傳遞到子組件中，可以在子組件中使用 v-bind="$attrs" 并指定排除的屬性名稱，或者在父組件中使用 .sync 修飾符，將屬性綁定到子組件的一個(gè)名為 $attrs 的屬性上。
$listeners 是一個(gè)包含了父組件傳遞給子組件的所有事件監(jiān)聽器的對(duì)象，可以在子組件中通過訪問 $listeners 來獲取這些事件監(jiān)聽器。如果需要在子組件中監(jiān)聽某個(gè)事件，可以使用 v-on="$listeners" 將所有的事件監(jiān)聽器綁定到子組件上。
$attrs 和 $listeners 是常用的兩個(gè)特殊屬性，它們可以用來向組件傳遞屬性和事件監(jiān)聽器。假設(shè)我們有一個(gè)父組件和一個(gè)子組件，子組件需要接收父組件的一些屬性和事件監(jiān)聽器，同時(shí)還需要把這些屬性和事件傳遞給子組件的某個(gè)子元素。
父組件中的代碼：
<template>
<div>
<child-component :title="title" v-on:click="handleClick" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
title: 'Hello World',
};
},
methods: {
handleClick() {
console.log('Button Clicked');
},
},
};
</script>子組件中的代碼：
<template>
<div>
<button @click="$emit('click')">Click me</button>
<div v-bind="$attrs">
<slot />
</div>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
title: {
type: String,
default: '',
},
},
mounted() {
console.log(this.$attrs);
console.log(this.$listeners);
},
};
</script>在子組件中，我們使用 v-bind="$attrs" 把所有父組件傳遞過來的屬性綁定到子元素上。同時(shí)，我們使用 $emit('click') 來觸發(fā)父組件傳遞過來的點(diǎn)擊事件。
在子組件 中，需要設(shè)置 inheritAttrs: false，來禁止自動(dòng)將父組件傳遞的屬性綁定到子組件的根元素上。這樣，我們就可以使用 v-bind="$attrs" 把所有屬性綁定到子元素上。
在 mounted 鉤子中，我們可以通過 this.$attrs 和 this.$listeners 來分別訪問所有屬性和事件監(jiān)聽器。這樣，我們就可以在子組件中使用這些屬性和事件了。
8、使用 $refs：可以使用 Vue 提供的 $refs 屬性來獲取組件實(shí)例，然后通過調(diào)用組件的方法來進(jìn)行數(shù)據(jù)傳遞。這種方式不推薦使用，因?yàn)椴灰拙S護(hù)和調(diào)試。
9、使用事件總線庫(kù)：可以使用 Vue.js 的第三方庫(kù)如 Event Bus、Tiny-Emmiter 等來傳遞數(shù)據(jù)。這些庫(kù)提供了一種方便、簡(jiǎn)單的方式來在不同的組件之間進(jìn)行事件傳遞。但是需要注意，使用第三方庫(kù)可能會(huì)增加項(xiàng)目的復(fù)雜性和維護(hù)成本。
三、Vue 3 組件之間傳值示例代碼
1、Props
Props 是一種在組件之間傳遞數(shù)據(jù)的方式，通過在組件標(biāo)簽上使用屬性綁定，父組件可以向子組件傳遞數(shù)據(jù)。在子組件中，通過在 props 中定義對(duì)應(yīng)的屬性名，可以獲取到父組件傳遞過來的數(shù)據(jù)。
例如，父組件中的模板：
<template>
<child-component :message="hello"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
hello: 'Hello from parent!'
};
}
};
</script>子組件中的模板：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
};
</script>2、$emit
$emit 是一種在子組件中觸發(fā)事件的方式，通過在子組件中使用 $emit 方法，可以向父組件發(fā)送數(shù)據(jù)。在父組件中，通過在子組件標(biāo)簽上使用 v-on 或 @ 語法，可以監(jiān)聽子組件觸發(fā)的事件，并獲取子組件發(fā)送的數(shù)據(jù)。
例如，子組件中的模板：
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child!');
}
}
};
</script>父組件中的模板：
<template>
<child-component @message-sent="receiveMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
receiveMessage(message) {
console.log(message);
}
}
};
</script>3、Provide/Inject
Provide/Inject 是一種在祖先組件和后代組件之間共享數(shù)據(jù)的方式。通過在祖先組件中使用 provide 方法提供數(shù)據(jù)，在后代組件中使用 inject 方法獲取數(shù)據(jù)。
例如，祖先組件中的模板：
<template>
<child-component></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
message: 'Hello from ancestor!'
};
}
};
</script>后代組件中的模板：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['message']
};
</script>4、$attrs 和 $listeners
$attrs 和 $listeners 是在 Vue 2 中引入的特性，但在 Vue 3 中也得到了支持。
例如，父組件中的模板：
<template>
<child-component message="Hello from parent!" @click="handleClick"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleClick() {
console.log('Clicked!');
}
}
};
</script>子組件中的模板：
<template>
<div v-bind="$attrs" v-on="$listeners">{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
};
</script>5、provide/inject 與 props 的結(jié)合使用
在 Vue 3 中，provide 和 inject 可以與 props 結(jié)合使用，從而實(shí)現(xiàn)一種高級(jí)的數(shù)據(jù)傳遞方式。具體做法是，在祖先組件中使用 provide 方法提供數(shù)據(jù)，并在后代組件中使用 inject 方法獲取數(shù)據(jù)；同時(shí)，在后代組件中，可以在 props 中聲明和接收數(shù)據(jù)，從而實(shí)現(xiàn)數(shù)據(jù)的類型檢查和默認(rèn)值設(shè)定。
例如，祖先組件中的模板：
<template>
<child-component></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
message: 'Hello from ancestor!'
};
}
};
</script>后代組件中的模板：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['message'],
props: {
message: {
type: String,
default: 'Hello from default!'
}
}
};
</script>在上面的例子中，子組件會(huì)首先從祖先組件中獲取名為 message 的數(shù)據(jù)，如果沒有提供，則使用默認(rèn)值 Hello from default!。在子組件中，props 會(huì)覆蓋 provide/inject，因此如果父組件和子組件都提供了同一個(gè)屬性，子組件中的 props 值會(huì)覆蓋 provide/inject 中的值。
6、Vuex
Vuex 是一種專門用于管理應(yīng)用程序狀態(tài)的庫(kù)，可以用于跨組件傳遞數(shù)據(jù)。在 Vuex 中，可以定義一個(gè)全局的狀態(tài)管理器，所有的組件都可以通過 getter 和 setter 方法訪問和修改這個(gè)狀態(tài)管理器中的數(shù)據(jù)。
例如，定義一個(gè) Vuex store：
import { createStore } from 'vuex';
const store = createStore({
state: {
message: 'Hello from store!'
},
mutations: {
updateMessage(state, message) {
state.message = message;
}
},
getters: {
getMessage(state) {
return state.message;
}
}
});
export default store;在組件中使用 Vuex：
<template>
<div>{{ message }}</div>
<button @click="updateMessage">Update message</button>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
computed: {
...mapGetters(['getMessage'])
},
methods: {
...mapMutations(['updateMessage'])
}
};
</script>在這個(gè)例子中，組件通過 mapGetters 方法將 Vuex store 中的 getMessage 方法映射為組件中的計(jì)算屬性，從而獲取 Vuex store 中的數(shù)據(jù)；同時(shí)，通過 mapMutations 方法將 Vuex store 中的 updateMessage 方法映射為組件中的方法，從而修改 Vuex store 中的數(shù)據(jù)。
7、EventBus
EventBus 是一種自定義事件總線，可以用于在任意組件之間傳遞數(shù)據(jù)。在 EventBus 中，可以定義一個(gè)全局的事件中心，所有的組件都可以通過 $on 和 $emit 方法監(jiān)聽和觸發(fā)自定義事件。
例如，定義一個(gè) EventBus：
import mitt from 'mitt'; const bus = mitt(); export default bus;
在組件中使用 EventBus：
<template>
<div>{{ message }}</div>
<button @click="updateMessage">Update message</button>
</template>
<script>
import bus from './event-bus';
export default {
data() {
return {
message: 'Hello from component!'
};
},
methods: {
updateMessage() {
this.message = 'New message!';
bus.emit('message-updated', this.message);
}
},
created() {
bus.on('message-updated', message => {
console.log(message);
});
}
};
</script>在這個(gè)例子中，組件中的 updateMessage 方法通過 EventBus 的 emit 方法觸發(fā)了一個(gè)名為 message-updated 的自定義事件，并將修改后的消息作為參數(shù)傳遞給事件處理函數(shù)；同時(shí)，在組件的 created 生命周期鉤子中，通過 EventBus 的 on 方法監(jiān)聽名為 message-updated 的自定義事件，并在事件處理函數(shù)中打印接收到的消息。
總之，Vue 3 中組件之間傳值的方式很多，可以根據(jù)具體的場(chǎng)景選擇最適合的方式。使用 props 和 $emit 可以實(shí)現(xiàn)父子組件之間的傳值，使用 provide 和 inject 可以實(shí)現(xiàn)祖先組件向后代組件的傳值，使用 Vuex 和 EventBus 可以實(shí)現(xiàn)任意組件之間的傳值。在選擇組件傳值方式時(shí)，還應(yīng)該考慮數(shù)據(jù)的安全性、可維護(hù)性和性能等因素。
四、Vue 2 和 Vue 3 組件之間傳值的區(qū)別
Vue 2 和 Vue 3 之間在組件之間傳遞值的方法有一些不同之處。下面是一些主要的區(qū)別：
Props
在 Vue 2 中，父組件通過 props 把數(shù)據(jù)傳遞給子組件。子組件可以在 props 選項(xiàng)中聲明它們需要的 props，然后在組件的模板中使用它們。
在 Vue 3 中，props 的使用與 Vue 2 類似，但有一些重要的變化。首先，props 的聲明方式已經(jīng)發(fā)生了變化，現(xiàn)在使用 ES6 的解構(gòu)語法來聲明。其次，Vue 3 強(qiáng)制 props 的類型檢查，并提供了更多的選項(xiàng)來控制 props 的行為，例如默認(rèn)值和必需性等。
Emit
在 Vue 2 中，子組件通過 emit 向父組件發(fā)送消息。子組件可以使用 this.$emit 方法觸發(fā)一個(gè)自定義事件，并可以傳遞任意數(shù)據(jù)作為事件的參數(shù)。父組件可以監(jiān)聽子組件觸發(fā)的事件，并在事件處理程序中處理傳遞的數(shù)據(jù)。
在 Vue 3 中，emit 的使用與 Vue 2 相似，但也有一些重要的變化。首先，Vue 3 引入了新的 setup() API，該 API 取代了 Vue 2 中的 created 和 mounted 等生命周期鉤子函數(shù)。其次，emit 的使用方式已經(jīng)改變，現(xiàn)在使用 v-model 代替 this.$emit。v-model 是一個(gè)語法糖，允許在父子組件之間雙向綁定數(shù)據(jù)。
Provide/Inject
在 Vue 2 中，父組件可以通過 provide 方法向子組件傳遞數(shù)據(jù)，子組件可以使用 inject 方法獲取數(shù)據(jù)。provide 和 inject 允許在組件樹中的任何地方傳遞數(shù)據(jù)，而不需要通過 props 一級(jí)一級(jí)地傳遞。
在 Vue 3 中，provide 和 inject 的使用方式與 Vue 2 相同。但是，Vue 3 提供了新的 reactive 和 readonly 方法，允許在 provide 中提供響應(yīng)式的數(shù)據(jù)。這意味著，如果在 provide 中提供的數(shù)據(jù)發(fā)生變化，子組件中使用這些數(shù)據(jù)的地方也會(huì)相應(yīng)地更新。
Vue 3 對(duì)于組件之間傳遞值的基本思想與 Vue 2 相似，但是有一些語法和 API 上的改變。這些變化旨在提供更好的類型檢查、更好的性能和更好的開發(fā)體驗(yàn)。
到此這篇關(guān)于Vue 組件之間傳值的主要方法的文章就介紹到這了,更多相關(guān)Vue 組件之間傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄赩ue單文件組件詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實(shí)現(xiàn)樣式隔離,確保組件間的樣式互不影響,通過在組件的style標(biāo)簽內(nèi)添加任何內(nèi)容,可以為組件生成一個(gè)唯一的哈希值,從而實(shí)現(xiàn)樣式的定位,本文通過實(shí)例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧2025-01-01
基于Vue3+TypeScript實(shí)現(xiàn)抖音式卡片滑動(dòng)交互功能
本文介紹如何用 Vue 3 + TypeScript 實(shí)現(xiàn)類似抖音的卡片滑動(dòng)交互,應(yīng)用于單詞記憶場(chǎng)景,完整方案包含手勢(shì)識(shí)別、堆疊動(dòng)畫、實(shí)時(shí)反饋和狀態(tài)管理,需要的朋友可以參考下2026-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)伸縮菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中出現(xiàn)首屏白屏的六種解決方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2025-02-02
這篇文章主要介紹了vue如何獲取當(dāng)前url地址加端口號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能實(shí)例
在Vue應(yīng)用中自定義指令是一種強(qiáng)大的功能,可以用于封裝DOM操作邏輯,這篇文章主要介紹了Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能的相關(guān)資料,需要的朋友可以參考下2025-07-07
解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue element 表頭添加斜線的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
Vue3中axios請(qǐng)求封裝、請(qǐng)求攔截與相應(yīng)攔截詳解
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于Vue3中axios請(qǐng)求封裝、請(qǐng)求攔截與相應(yīng)攔截的相關(guān)資料,需要的朋友可以參考下2023-05-05