詳解Vue的七種傳值方式
更新時間：2021年02月08日 14:53:04 作者：鵬多多
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1，父傳子
子組件中定義props字段，類型為數(shù)組（如果需要限制字段值類型，也可以定義為對象的形式）。如下圖的例子，父組件掛載子組件HelloWorld，在組件標(biāo)簽上給title賦值，子組件HelloWorld定義props，里面有一個值是title，這樣子組件就可以使用父組件的值了。
父組件
<template>
<div>
<HelloWorld :title="msg" />
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
name: "Home",
data() {
return {
msg: "搜索音樂",
};
},
components: {
HelloWorld,
},
};
</script>
子組件
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props:["title"],
data() {
return {};
},
};
</script>
2，子傳父
子傳父，需要在子組件中觸發(fā)一個事件，在事件中，調(diào)用$emit('父組件的方法名', '傳遞的值')，然后在父組件中，通過自定義事件接收傳遞過來的值。
子組件
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
this.$emit("childEvent", this.age);
}
},
};
</script>
父組件
<template>
<div>
<HelloWorld @childEvent="parentEvent" :title="msg" />
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
name: "Home",
data() {
return {
msg: "搜索音樂",
};
},
methods: {
parentEvent(e) {
console.log(e);
},
},
components: {
HelloWorld,
},
};
</script>
3，兄弟組件傳值
1，先新建一個bus.js文件，在bus.js里new一個Vue實例，充當(dāng)傳輸數(shù)據(jù)的中間層。
import Vue from 'vue'; export default new Vue;
2，在組件A中引入bus.js，通過bus.$emit('事件名','參數(shù)')傳遞參數(shù)
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
import bus from "../publicFn/bus.js";
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
bus.$emit("childEvent", this.age);
}
},
};
</script>
3，在B組件mounted周期中使用$on('事件名', function(){})接收
<template>
<div id='swiper'>
<button>我是按鈕</button>
</div>
</template>
<script>
import bus from "../publicFn/bus.js";
export default {
name:'Swiper',
data (){
return {
}
},
mounted(){
bus.$on("childEvent", (e) => {
console.log(e)
})
}
}
</script>
4，父組件使用子組件的數(shù)據(jù)和方法
1，在子組件標(biāo)簽上寫上ref屬性
2，父組件通過this.$refs.id.方法名或者this.$refs.id.屬性名的方式可以訪問子組件。
父組件
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
<button @click="parentEvent">我是父親</button>
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
name: "Home",
data() {
return {
msg: "搜索音樂",
};
},
methods: {
parentEvent() {
this.$refs.hello.add();
console.log(this.$refs.hello.age);
},
},
components: {
HelloWorld
},
};
</script>
子組件
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
console.log("我是子組件");
}
},
};
</script>
5，子組件使用父組件的數(shù)據(jù)和方法
在子組件中，可以使用$parent訪問其上級父組件的數(shù)據(jù)和方法，如果是多重嵌套，也可以使用多層$parent。
父組件
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
name: "Home",
data() {
return {
msg: "搜索音樂",
};
},
methods: {
parentEvent() {
console.log("我是父組件的方法");
},
},
components: {
HelloWorld
},
};
</script>
子組件
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
console.log(this.$parent.msg)
this.$parent.parentEvent();
}
},
};
</script>
6，Vuex傳值
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。一般小項目不需要用到。
6.1，定義store
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
school: "清華大學(xué)",
a:"nice"
},
getters: {
returnVal(state) {
return state.school + state.a;
},
},
mutations: {
changeSchool(state, val) {
state.school = val;
console.log('修改成功');
},
},
actions: {},
modules: {}
});
6.2，掛載
import Vue from 'vue';
import App from './App.vue';
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import publicFn from "./publicFn/publicFn";
Vue.config.productionTip = false
const url = process.env.VUE_APP_URL;
Vue.prototype.$url = url;
Vue.prototype.$publicFn = publicFn;
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
6.3，使用
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
console.log(this.$store.state.school);//獲取值
//this.$store.commit('changeSchool', '北京大學(xué)');//修改值
// console.log(this.$store.getters.returnVal)//獲取過濾后的值
}
},
};
</script>
7，路由傳值
7.1 通過query傳值
注意：該方式刷新頁面參數(shù)不丟失，并且會在地址欄后將參數(shù)顯露，http://localhost:9000/#/conter?id=10086&name=%E9%B9%8F%E5%A4%9A%E5%A4%9A
頁面A
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
<button @click="parentEvent">跳轉(zhuǎn)</button>
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
name: "Home",
data() {
return {
msg: "搜索音樂",
};
},
methods: {
parentEvent() {
this.$router.push({
path:"/conter",
name:'conter',
query:{
id:10086,
name:"鵬多多"
}
})
},
},
components: {
HelloWorld
},
};
</script>
頁面B
<template>
<div id='conter'>
</div>
</template>
<script>
export default {
name:'conter',
data (){
return {
}
},
created (){
console.log(this.$route.query.id, this.$route.query.name);
},
}
</script>
7.2 通過params傳值
注意：該方式刷新頁面參數(shù)會丟失，可以接收后存在sessionStorage。
A頁面
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
<button @click="parentEvent">跳轉(zhuǎn)</button>
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
name: "Home",
data() {
return {
msg: "搜索音樂",
};
},
methods: {
parentEvent() {
this.$router.push({
path:"/conter",
name:"conter",
params:{
id:10086,
name:"鵬多多"
}
})
},
},
components: {
HelloWorld
},
};
</script>
B頁面
<template>
<div id='conter'>
</div>
</template>
<script>
export default {
name:'conter',
data (){
return {
}
},
created (){
console.log(this.$route.params.id, this.$route.params.name);
},
}
</script>
到此這篇關(guān)于Vue的七種傳值方式的文章就介紹到這了,更多相關(guān)Vue傳值方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue虛擬dom是如何被創(chuàng)建的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
今天小編就為大家分享一篇vue 點擊按鈕增加一行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
淺談VueUse中useAsyncState的實現(xiàn)原理
useAsyncState?是 VueUse 庫中提供的一個實用工具,它用于處理異步狀態(tài),本文主要介紹了VueUse中useAsyncState的實現(xiàn)及其原理,具有一定的參考價值,感興趣的可以了解一下2024-08-08
下面小編就為大家分享一篇解決vue中對象屬性改變視圖不更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在許多Web應(yīng)用程序中，日歷是一個常見的組件，它通常用于顯示日期、安排會議、查看活動等，在Vue中，我們可以使用第三方庫來輕松實現(xiàn)日歷功能，也可以手動編寫代碼來實現(xiàn)日歷的展示和操作，本文將介紹如何使用vue-calendar和手動編寫代碼來實現(xiàn)日歷功能2023-07-07
解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題
這篇文章主要給大家介紹一下如何解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題，文中有相關(guān)的解決方法，通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
基于Electron+Vite快速構(gòu)建Vue3桌面應(yīng)用
這篇文章主要介紹了如何基于Electron和Vite快速構(gòu)建Vue3桌面應(yīng)用，本文主要技術(shù)棧就是Vue3、vite、Electron，文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07
axios請求頭設(shè)置常見Content-Type和對應(yīng)參數(shù)的處理方式
這篇文章主要介紹了axios請求頭設(shè)置常見Content-Type和對應(yīng)參數(shù)的處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03