vue中動(dòng)態(tài)組件使用及傳值方式
vue動(dòng)態(tài)組件使用及傳值
在項(xiàng)目中常常需要切換不同的組件，這時(shí)候我們就可以使用vue內(nèi)置的動(dòng)態(tài)組件的方式來(lái)實(shí)現(xiàn)。
component 組件：在頁(yè)面中通過(guò)使用component元素，在根據(jù)組件中的is屬性來(lái)動(dòng)態(tài)的切換不同的組件。
demo：
<template> //index.vue
<div class="contain-wrap">
<input type="button" @click="fatherBtn()" value="點(diǎn)擊顯示子組件">
<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:"動(dòng)態(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="子組件操作這個(gè)值">
</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子組件操作這個(gè)值">
</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>
點(diǎn)擊點(diǎn)擊顯示子組件按鈕就可以實(shí)現(xiàn)動(dòng)態(tài)組件之間的切換。
動(dòng)態(tài)組件傳參：
通過(guò)上面的demo可以實(shí)現(xiàn)組件之間的切換，其實(shí)也是可以給動(dòng)態(tài)組件傳值的。
demo: 還是上面那個(gè)demo只不過(guò)在上面加上了一些傳值的內(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)
},
效果圖：
通過(guò)控制臺(tái)打印你會(huì)發(fā)現(xiàn)，只要綁定到動(dòng)態(tài)組件上的屬性，在每一個(gè)組件中都可以獲取到，并且也可以在動(dòng)態(tài)組件中綁定事件
keep-alive：動(dòng)態(tài)切換掉的組件是被移除掉了，如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。為此可以添加一個(gè) keep-alive 指令參數(shù)：
<keep-alive> <component @fatherEvent="btnclick" :is="which_to_show" :tt="params" :ff="arr" :yy="which_to_show"></component> </keep-alive>
通過(guò)使用keep-alive來(lái)存儲(chǔ)被移除的組件的狀態(tài)。這樣用戶(hù)再切換回來(lái)的時(shí)候仍然可以看到之前的內(nèi)容。
actived、deactivated鉤子函數(shù)的使用
keep-alive可以配合actived、deactivated鉤子函數(shù)使用，actived表示在keep-alive緩存組件被激活時(shí)調(diào)用。deactivated表示在 keep-alive 緩存的組件被停用時(shí)調(diào)用。因此我們可以在這個(gè)鉤子函數(shù)中做一些邏輯數(shù)據(jù)處理
vue組件的定義使用及簡(jiǎn)單傳值
組件：定義的組件是頁(yè)面的一部分，組件具有共用行，復(fù)用性，組件內(nèi)部的data數(shù)據(jù)是被當(dāng)前調(diào)用組件獨(dú)立使用的，不影響其他使用
全局組件：只要定義了，處處可以使用，性能不高，但使用起來(lái)簡(jiǎn)單
局部組件：定義了，只有注冊(cè)才能使用，性能高，使用起來(lái)復(fù)雜
組件傳值：父組件–》子組件
子組件通過(guò)props接受父組件傳遞來(lái)的值，子組件可以接受父組件傳遞來(lái)的String，Boolen,Number,Array,Object,Function這些數(shù)據(jù)類(lèi)型
單項(xiàng)數(shù)據(jù)流概念：子組件可以使用父組件傳遞來(lái)的數(shù)據(jù)，但是絕對(duì)不能修改傳遞來(lái)的數(shù)據(jù)；子組件可以在data中添加一個(gè)屬性值來(lái)接收父組件傳遞來(lái)的值，這樣就可以修改值了，這里修改的是子組件自己的data值：如 newcount: this.count
如果子組件沒(méi)有props接受父組件傳遞來(lái)的值，即Non-prop屬性；那么父組件傳遞來(lái)的值就會(huì)成為子組件標(biāo)簽上的屬性值
<!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: "組件傳值-我是一個(gè)全局組件",
msg2: "組件傳值-我是一個(gè)局部組件",
eventFun: () => {
console.log("我是父組件傳遞來(lái)的函數(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ù)類(lèi)型，String類(lèi)型
default: "默認(rèn)值"
},
event: Function, //傳遞參數(shù)類(lèi)型，function類(lèi)型
count: Number
},
methods: {
handleClick() {
console.log("觸發(fā)父組件傳遞來(lái)的函數(shù)");
this.event(); //父組件傳遞來(lái)的函數(shù)
this.newcount += 1; //每次點(diǎn)擊加1
}
},
template: `<div v-on:click="handleClick">{{val}}：{{message}}{{newcount}}</div>`
});
var vm = app.mount("#root");
</script>
</html>
子組件通過(guò)事件向父組件傳值
1.在子組件上添加自定義事件觸發(fā)父組件methods中的方法，獲取子組件傳遞來(lái)的值；
2.在子組件methods中添加方法，通過(guò)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", "我是子組件，向你問(wèn)好", 2);
}
},
template: `
<div v-on:click="childComponent">
我是子組件，我想向父組件傳值:{{count}}
</div>
`
});
const vm = app.mount("#root");
</script>
</html>
子組件也可以通過(guò)v-model進(jìn)行數(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子組件傳值，即多層組件傳值
通過(guò)在父組件中添加一個(gè)provide方法，并把要傳遞的值寫(xiě)入進(jìn)去；
在孫子組件或者在下級(jí)組件中通過(guò)添加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");
//頁(yè)面輸出：
// 我是孩子組件：我要引入我的孩子組件
//我是孫子組件:2
</script>
</html>
通過(guò)ref動(dòng)態(tài)綁定組件，并通過(guò)this.$refs[‘組件名稱(chēng)’]獲取組件的不同信息
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?require.context()的用法實(shí)例詳解
require.context是webpack提供的一個(gè)api,通常用于批量注冊(cè)組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Vue3+NodeJS+Soket.io實(shí)現(xiàn)實(shí)時(shí)聊天的示例代碼
本文主要介紹了Vue3+NodeJS+Soket.io實(shí)現(xiàn)實(shí)時(shí)聊天的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程
最近開(kāi)始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2023-04-04
基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解
這篇文章主要介紹了基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue中import from的來(lái)源及省略后綴與加載文件夾問(wèn)題
這篇文章主要介紹了Vue中import from的來(lái)源--省略后綴與加載文件夾,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
基于vue-router的matched實(shí)現(xiàn)面包屑功能
本文主要介紹了基于vue-router的matched實(shí)現(xiàn)面包屑功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue elementUI使用tabs與導(dǎo)航欄聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue elementUI使用tabs與導(dǎo)航欄聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vue屬性props默認(rèn)類(lèi)型的寫(xiě)法介紹
這篇文章主要介紹了vue屬性props默認(rèn)類(lèi)型的寫(xiě)法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10