詳解Vue的七種傳值方式
更新時(shí)間：2021年02月08日 14:53:04 作者：鵬多多
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1，父?jìng)髯?/h2>
子組件中定義props字段，類(lèi)型為數(shù)組（如果需要限制字段值類(lèi)型，也可以定義為對(duì)象的形式）。如下圖的例子，父組件掛載子組件HelloWorld，在組件標(biāo)簽上給title賦值，子組件HelloWorld定義props，里面有一個(gè)值是title，這樣子組件就可以使用父組件的值了。
父組件
<template>
<div>
<HelloWorld :title="msg" />
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
name: "Home",
data() {
return {
msg: "搜索音樂(lè)",
};
},
components: {
HelloWorld,
},
};
</script>
子組件
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props:["title"],
data() {
return {};
},
};
</script>
2，子傳父
子傳父，需要在子組件中觸發(fā)一個(gè)事件，在事件中，調(diào)用$emit('父組件的方法名', '傳遞的值')，然后在父組件中，通過(guò)自定義事件接收傳遞過(guò)來(lái)的值。
子組件
<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: "搜索音樂(lè)",
};
},
methods: {
parentEvent(e) {
console.log(e);
},
},
components: {
HelloWorld,
},
};
</script>
3，兄弟組件傳值
1，先新建一個(gè)bus.js文件，在bus.js里new一個(gè)Vue實(shí)例，充當(dāng)傳輸數(shù)據(jù)的中間層。
import Vue from 'vue'; export default new Vue;
2，在組件A中引入bus.js，通過(guò)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)簽上寫(xiě)上ref屬性
2，父組件通過(guò)this.$refs.id.方法名或者this.$refs.id.屬性名的方式可以訪(fǎng)問(wèn)子組件。
父組件
<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: "搜索音樂(lè)",
};
},
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訪(fǎng)問(wèn)其上級(jí)父組件的數(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: "搜索音樂(lè)",
};
},
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 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。一般小項(xiàng)目不需要用到。
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)//獲取過(guò)濾后的值
}
},
};
</script>
7，路由傳值
7.1 通過(guò)query傳值
注意：該方式刷新頁(yè)面參數(shù)不丟失，并且會(huì)在地址欄后將參數(shù)顯露，http://localhost:9000/#/conter?id=10086&name=%E9%B9%8F%E5%A4%9A%E5%A4%9A
頁(yè)面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: "搜索音樂(lè)",
};
},
methods: {
parentEvent() {
this.$router.push({
path:"/conter",
name:'conter',
query:{
id:10086,
name:"鵬多多"
}
})
},
},
components: {
HelloWorld
},
};
</script>
頁(yè)面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 通過(guò)params傳值
注意：該方式刷新頁(yè)面參數(shù)會(huì)丟失，可以接收后存在sessionStorage。
A頁(yè)面
<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: "搜索音樂(lè)",
};
},
methods: {
parentEvent() {
this.$router.push({
path:"/conter",
name:"conter",
params:{
id:10086,
name:"鵬多多"
}
})
},
},
components: {
HelloWorld
},
};
</script>
B頁(yè)面
<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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中漸進(jìn)過(guò)渡效果實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue中漸進(jìn)過(guò)渡效果的實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒(méi)有滾動(dòng)條問(wèn)題
這篇文章主要介紹了vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒(méi)有滾動(dòng)條問(wèn)題,解決方法很簡(jiǎn)單，只需要一行簡(jiǎn)短代碼就可以解決，下面小編給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05
TypeScript基本類(lèi)型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類(lèi)型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
Vue3之getCurrentInstance與ts結(jié)合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結(jié)合使用的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue.js 底部導(dǎo)航欄 一級(jí)路由顯示 子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導(dǎo)航欄 一級(jí)路由顯示 子路由不顯示的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下2023-07-07
通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例
這篇文章主要介紹了創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04