目錄
1，父傳子
子元件中定義props欄位，型別為陣列（如果需要限制欄位值型別，也可以定義為物件的形式）。如下圖的例子，父元件掛載子元件HelloWorld，在元件標籤上給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，子傳父
子傳父，需要在子元件中觸發一個事件，在事件中，呼叫$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例項，充當傳輸資料的中間層。
import Vue from 'vue';
export default new Vue;
2，在元件A中引入bus.js，通過bus.$emit('事件名','引數')傳遞引數
<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，父元件使用子元件的資料和方法
1，在子元件標籤上寫上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，子元件使用父元件的資料和方法
在子元件中，可以使用$parent訪問其上級父元件的資料和方法，如果是多重巢狀，也可以使用多層$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 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。一般小專案不需要用到。
6.1，定義store
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
school: "清華大學",
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', '北京大學');//修改值
// console.log(this.$store.getters.returnVal)//獲取過濾後的值
}
},
};
</script>
7，路由傳值
7.1 通過query傳值
注意：該方式重新整理頁面引數不丟失，並且會在位址列後將引數顯露，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">跳轉</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傳值
注意：該方式重新整理頁面引數會丟失，可以接收後存在sessionStorage。
A頁面
<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.$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>
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁