基于現(xiàn)在都是模塊化開發(fā)旋奢,vue開發(fā)過程中組件之間傳值是必不可少的至朗,常用的vue的組件傳值分為三種方式:父?jìng)髯泳缃⒆觽鞲盖乱⒎歉缸咏M件傳值辛蚊。
一、父組件給子組件傳值----通過屬性
1.子組件需要做的事:
(1)創(chuàng)建一個(gè)子組件
(2)寫好子組件中自己的邏輯
(3)通過 props:[父組件傳值的key] 來接收父組件傳遞的值
props可接收對(duì)象(屬性為傳遞的值初澎,屬性值為規(guī)定傳遞值的數(shù)據(jù)類型)虑凛、數(shù)組格式的值
2.父組件需要做的事:
(1)導(dǎo)入子組件
import subimagesilder from '../subcomponent/subimagesilder.vue';
(2)注冊(cè)子組件
components:{
subimagesilder
}
(3)在<template></template>中使用子組件
<subimagesilder :imageList="imageList"></subimagesilder>
注意:imageList是父組件給子組件傳遞的值
形式:<子組件對(duì)象 :父組件傳值的key=值></子組件對(duì)象>
二、子組件給父組件傳值----通過觸發(fā)自定義事件
1.子組件需要做的事:
(1)寫好子組件自己的代碼
(2)在需要傳值給父組件數(shù)據(jù)的地方定義并調(diào)用key事件
this.$emit(key,值)
key表示自定義事件名延柠,值表示要傳遞的值
這里表示會(huì)觸發(fā)key事件
注意,這個(gè)key等下在父組件中要使用到
2.父組件需要做的事:
(1)導(dǎo)入子組件
(2)在components中注冊(cè)子組件
(3)在<template></template>中使用子組件
(4)在子組件的標(biāo)簽中,注冊(cè)(綁定)key事件發(fā)生時(shí)執(zhí)行的函數(shù)名稱锣披,例如:
<subnumber v-on:key='函數(shù)名稱'></subnumber>
(5)在父組件的methods中,寫好接收子組件傳過來的值的函數(shù)即可,例如:
methods:{
函數(shù)名稱(子組件傳遞過來的值){
xxxxxx
}
}
子組件負(fù)責(zé)觸發(fā)key事件增热,父組件負(fù)責(zé)注冊(cè)key事件
三胧辽、非父子組件之間傳遞值----通過Bus/總線/發(fā)布訂閱模式/觀察者模式(4種叫法)
1.創(chuàng)建一個(gè)公共的vue實(shí)例
- 方式1:創(chuàng)建一個(gè)公共的vue實(shí)例(在js中),并且導(dǎo)出邑商,在傳值和接收值的兩方都引入這個(gè)js
- 方式2:Vue.prototype.bus = new Vue();
表示先在Vue的原型上添加bus屬性凡蚜,值為Vue的一個(gè)實(shí)例x吭从。之后創(chuàng)建的Vue實(shí)例中都帶有bus屬性,并且bus屬性值都指向Vue實(shí)例x
2.在傳值的組件中,調(diào)用公共的vue實(shí)例芹务。
通過 vue實(shí)例.$emit() 傳值鸭廷。傳值方觸發(fā)自定義事件
3.在接收的組件中,調(diào)用公共的Vue實(shí)例。
通過 Vue實(shí)例.$on() 接收辆床。接收方注冊(cè)自定義事件
注意:觸發(fā)和監(jiān)聽兩個(gè)操作必須在公共的vue實(shí)例中進(jìn)行傳值和接收值