vue中動態(tài)組件使用及傳值方式
vue動態(tài)組件使用及傳值
在項目中常常需要切換不同的組件,這時候我們就可以使用vue內(nèi)置的動態(tài)組件的方式來實現(xiàn)。
component 組件:在頁面中通過使用component元素,在根據(jù)組件中的is屬性來動態(tài)的切換不同的組件。
demo:
<template> //index.vue <div class="contain-wrap"> <input type="button" @click="fatherBtn()" value="點擊顯示子組件"> <component :is="which_to_show" @fatherEvent="btnclick" ></component> </div> </template> <script> import FoodNews from "./foodNews" import List from "./list" import About from "./about" export default { name: "index", components:{ List, FoodNews, }, data() { return { arr:['123','如圖表'], content:'', which_to_show:"List", params:"動態(tài)主鍵之間的傳參" }; }, methods:{ btnclick(params){ console.log(`嗚嗚~ 我被子組件${params}觸發(fā)了 嚶嚶`) }, fatherBtn(){ let arr=["List","FoodNews"] let index=arr.indexOf(this.which_to_show) if(index<2){ this.which_to_show=arr[index+1] }else{ this.which_to_show = arr[0]; } } }, created() {}, }; </script> <style module lang="scss"> .title{ color:purple; } </style>
子組件:
<template>//foodNews.vue <div :class="$style.container"> <input type="button" @click="btnClick()" value="子組件操作這個值"> </div> </template> <script> export default { name: "FoodNews", data() { return {}; }, methods: { btnClick(){ this.$emit("fatherEvent","foodNews") } } }; </script> <style module lang="scss"> .container{ width: 500px; height:500px; } .title{ color:skyblue; } </style>
<template>//list.vue <div class="contain-wrap" :style="{backgroundImage: 'url('+backgroundImg+')'}"> <div class="contain" > <input type="button" @click="btnClick3()" value="List子組件操作這個值"> </div> </div> </template> <script> import NxNav from "../components/NxNav"; export default { name: "index", data() { return { backgroundImg:require('@/assets/foot/17.jpg'), } }, methods:{ btnClick3(){ this.$emit("fatherEvent","list") } }, mounted(){ }, } </script> <style scoped lang="scss"> .contain-wrap{ height: auto; min-height:500px; display: flex; flex-direction: column; } </style>
點擊點擊顯示子組件按鈕就可以實現(xiàn)動態(tài)組件之間的切換。
動態(tài)組件傳參:
通過上面的demo可以實現(xiàn)組件之間的切換,其實也是可以給動態(tài)組件傳值的。
demo: 還是上面那個demo只不過在上面加上了一些傳值的內(nèi)容
//index.vue <component :is="which_to_show" :tt="params" :ff="arr" :yy="which_to_show"></component>
props:{//list.vue tt:{ type:String }, ff:{ type:Array }, yy:{ type:String }}, created() { console.log(this.tt) console.log(this.yy) console.log(this.ff) },
props:{//foodNews.vue tt:{ type:String }, ff:{ type:Array }, yy:{ type:String } }, created() { console.log(this.tt) console.log(this.yy) console.log(this.ff) },
效果圖:
通過控制臺打印你會發(fā)現(xiàn),只要綁定到動態(tài)組件上的屬性,在每一個組件中都可以獲取到,并且也可以在動態(tài)組件中綁定事件
keep-alive:動態(tài)切換掉的組件是被移除掉了,如果把切換出去的組件保留在內(nèi)存中,可以保留它的狀態(tài)或避免重新渲染。為此可以添加一個 keep-alive 指令參數(shù):
<keep-alive> <component @fatherEvent="btnclick" :is="which_to_show" :tt="params" :ff="arr" :yy="which_to_show"></component> </keep-alive>
通過使用keep-alive來存儲被移除的組件的狀態(tài)。這樣用戶再切換回來的時候仍然可以看到之前的內(nèi)容。
actived、deactivated鉤子函數(shù)的使用
keep-alive可以配合actived、deactivated鉤子函數(shù)使用,actived表示在keep-alive緩存組件被激活時調(diào)用。deactivated表示在 keep-alive 緩存的組件被停用時調(diào)用。因此我們可以在這個鉤子函數(shù)中做一些邏輯數(shù)據(jù)處理
vue組件的定義使用及簡單傳值
組件:定義的組件是頁面的一部分,組件具有共用行,復用性,組件內(nèi)部的data數(shù)據(jù)是被當前調(diào)用組件獨立使用的,不影響其他使用
全局組件:只要定義了,處處可以使用,性能不高,但使用起來簡單
局部組件:定義了,只有注冊才能使用,性能高,使用起來復雜
組件傳值:父組件–》子組件
子組件通過props接受父組件傳遞來的值,子組件可以接受父組件傳遞來的String,Boolen,Number,Array,Object,Function這些數(shù)據(jù)類型
單項數(shù)據(jù)流概念:子組件可以使用父組件傳遞來的數(shù)據(jù),但是絕對不能修改傳遞來的數(shù)據(jù);子組件可以在data中添加一個屬性值來接收父組件傳遞來的值,這樣就可以修改值了,這里修改的是子組件自己的data值:如 newcount: this.count
如果子組件沒有props接受父組件傳遞來的值,即Non-prop屬性;那么父組件傳遞來的值就會成為子組件標簽上的屬性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="root"></div> </body> <script src="https://unpkg.com/vue@next"></script> <script> //局部組件 const localComponent = { data() { return { val: "局部組件" } }, props: ['message2', 'params'], template: ` <div>{{val}}:{{message2}}{{params.a}}</div> ` } var app = Vue.createApp({ data() { return { msg: "組件傳值-我是一個全局組件", msg2: "組件傳值-我是一個局部組件", eventFun: () => { console.log("我是父組件傳遞來的函數(shù)") }, params: { a: '1', b: '2', c: '3' }, oldcount: 1 } }, components: { localComponent }, template: ` <div> <global-component v-bind:message="msg" v-bind:event="eventFun" v-bind:count="oldcount" /> <local-component v-bind:message2="msg2" v-bind:params="params" /> </div> ` }); //全局組件 app.component("globalComponent", { data() { return { val: "全局組件", newcount: this.count } }, props: { message: { type: String, //傳遞參數(shù)類型,String類型 default: "默認值" }, event: Function, //傳遞參數(shù)類型,function類型 count: Number }, methods: { handleClick() { console.log("觸發(fā)父組件傳遞來的函數(shù)"); this.event(); //父組件傳遞來的函數(shù) this.newcount += 1; //每次點擊加1 } }, template: `<div v-on:click="handleClick">{{val}}:{{message}}{{newcount}}</div>` }); var vm = app.mount("#root"); </script> </html>
子組件通過事件向父組件傳值
1.在子組件上添加自定義事件觸發(fā)父組件methods中的方法,獲取子組件傳遞來的值;
2.在子組件methods中添加方法,通過this.$emit(“父組件中自定義事件”,參數(shù),…)觸發(fā)父組件中的方法并傳遞參數(shù)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="root"></div> </body> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { count: 1 } }, methods: { handleComponent(params, params2) { console.log(params) this.count += params2; } }, template: ` <div> <component-sendvalue v-bind:count="count" v-on:fatherComponent="handleComponent" /> </div> ` }); app.component("componentSendvalue", { props: ['count'], methods: { childComponent() { this.$emit("fatherComponent", "我是子組件,向你問好", 2); } }, template: ` <div v-on:click="childComponent"> 我是子組件,我想向父組件傳值:{{count}} </div> ` }); const vm = app.mount("#root"); </script> </html>
子組件也可以通過v-model進行數(shù)據(jù)之間的雙向綁定:
const app = Vue.createApp({ data() { return { count: 1, count2: 1 } }, template: ` <child-component v-model:count="count" v-model:count2="count2" /> ` }); app.component("childComponent", { props: ["count", "count2"], methods: { handelClick() { this.$emit("update:count", this.count + 4) } }, template: ` <div v-on:click="handelClick">我是子組件:{{count}}:{{count2}}</div> ` }) const vm = app.mount("#root");
父組件向?qū)O子組件傳值,即多層組件傳值
通過在父組件中添加一個provide方法,并把要傳遞的值寫入進去;
在孫子組件或者在下級組件中通過添加inject數(shù)組獲取要傳遞的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="root"></div> </body> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { count: 2 } }, // provide: { // count: 1 // }, provide() { return { count: this.count } }, template: ` <child-componet /> ` }); app.component("child-componet", { template: `<div> 我是孩子組件:我要引入我的孩子組件 <grandson-componet /> </div>` }) app.component("grandson-componet", { inject: ['count'], template: `<div>我是孫子組件:{{count}}</div>` }) const vm = app.mount("#root"); //頁面輸出: // 我是孩子組件:我要引入我的孩子組件 //我是孫子組件:2 </script> </html>
通過ref動態(tài)綁定組件,并通過this.$refs[‘組件名稱’]獲取組件的不同信息
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼
本文主要介紹了Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01基于vue+element實現(xiàn)全局loading過程詳解
這篇文章主要介紹了基于vue+element實現(xiàn)全局loading過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07Vue中import from的來源及省略后綴與加載文件夾問題
這篇文章主要介紹了Vue中import from的來源--省略后綴與加載文件夾,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02基于vue-router的matched實現(xiàn)面包屑功能
本文主要介紹了基于vue-router的matched實現(xiàn)面包屑功能,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09vue elementUI使用tabs與導航欄聯(lián)動
這篇文章主要為大家詳細介紹了vue elementUI使用tabs與導航欄聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-06-06