對於vue來講,組件是很是常見的,有不少平臺都封裝了了屬於本身一套的組件,如element ui、we ui等等。同時組件之間的消息傳遞也是很是重要的,下面是我對組件之間消息傳遞的各類方式的總結,共有8種方式。若有不足之處,能夠留言補充,互相學習。前端
1. props和$emitvue
這是最最經常使用的父子組件通訊方式,父組件向子組件傳遞數據是經過prop傳遞的,子組件傳遞數據給父組件是經過$emit觸發事件來作到的。 實例:web
父組件面試
- Vue.component('parent',{
- template:`
- <div>
- <p>父組件</p>
- <child :message="message" v-on:getChildData="getChildData"></child>
- </div>
- `,
- data(){
- return {
- message:'Hello web秀'
- }
- },
- methods:{
- //執行子組件觸發的事件
- getChildData(val){
- console.log(val)
- }
- }
- })
- var app=new Vue({
- el:'#app',
- template:`
- <div>
- <parent></parent>
- </div>
- `
- })
子組件vuex
- Vue.component('child',{
- //獲得父組件傳遞過來的數據
- props:['message'],
- data(){
- return {
- myMessage: this.message
- }
- },
- template:`
- <div>
- <input type="text" v-model="myMessage" @input="passData(myMessage)">
- </div>
- `,
- methods:{
- passData(val){
- //觸發父組件中的事件
- this.$emit('getChildData',val)
- }
- }
- })
解析:架構
2. $attrs和$listenersapp
第一種方式處理父子組件之間的數據傳輸有一個問題:若是多層嵌套,父組件A下面有子組件B,組件B下面有組件C,這時若是組件A想傳遞數據給組件C怎麼辦呢?iview
若是採用第一種方法,咱們必須讓組件A經過prop傳遞消息給組件B,組件B在經過prop傳遞消息給組件C;要是組件A和組件C之間有更多的組件,那採用這種方式就很複雜了。從Vue 2.4開始,提供了$attrs和$listeners來解決這個問題,可以讓組件A之間傳遞消息給組件C。ide
C組件學習
- Vue.component('C',{
- template:`
- <div>
- <input type="text" v-model="$attrs.messageC" @input="passCData($attrs.messageC)">
- </div>
- `,
- methods:{
- passCData(val){
- //觸發父組件A中的事件
- this.$emit('getCData',val)
- }
- }
- })
B組件
- Vue.component('B',{
- data(){
- return {
- myMessage:this.message
- }
- },
- template:`
- <div>
- <input type="text" v-model="myMessage" @input="passData(myMessage)">
- <C v-bind="$attrs" v-on="$listeners"></C>
- </div>
- `,
- //獲得父組件傳遞過來的數據
- props:['message'],
- methods:{
- passData(val){
- //觸發父組件中的事件
- this.$emit('getChildData',val)
- }
- }
- })
A組件
- Vue.component('A',{
- template:`
- <div>
- <p>this is parent compoent!</p>
- <B
- :messageC="messageC"
- :message="message"
- v-on:getCData="getCData"
- v-on:getChildData="getChildData(message)">
- </B>
- </div>
- `,
- data(){
- return {
- message:'Hello',
- messageC:'Hello c'
- }
- },
- methods:{
- getChildData(val){
- console.log('這是來自B組件的數據')
- },
- //執行C子組件觸發的事件
- getCData(val){
- console.log("這是來自C組件的數據:"+val)
- }
- }
- })
- var app=new Vue({
- el:'#app',
- template:`
- <div>
- <A></A>
- </div>
- `
- })
解析:
3. v-model
父組件經過v-model傳遞值給子組件時,會自動傳遞一個value的prop屬性,在子組件中經過this.$emit(‘input',val)自動修改v-model綁定的值
子組件
- Vue.component('child',{
- props:{
- //v-model會自動傳遞一個字段爲value的prop屬性
- value: String,
- },
- data(){
- return {
- myMessage:this.value
- }
- },
- methods:{
- changeValue(){
- //經過如此調用能夠改變父組件上v-model綁定的值
- this.$emit('input',this.myMessage);
- }
- },
- template:`
- <div>
- <input
- type="text"
- v-model="myMessage"
- @change="changeValue">
- </div>
- `
- })
父組件
- Vue.component('parent',{
- template:`
- <div>
- <p>this is parent compoent!</p>
- <p>{{message}}</p>
- <child v-model="message"></child>
- </div>
- `,
- data(){
- return {
- message:'Hello'
- }
- }
- })
- var app=new Vue({
- el:'#app',
- template:`
- <div>
- <parent></parent>
- </div>
- `
- })
4. provide和inject
父組件中經過provider來提供變量,而後在子組件中經過inject來注入變量。不論子組件有多深,只要調用了inject那麼就能夠注入provider中的數據。而不是侷限於只能從當前父組件的prop屬性來獲取數據,只要在父組件的生命週期內,子組件均可以調用。
子組件
- Vue.component('child',{
- inject:['for'],//獲得父組件傳遞過來的數據
- data(){
- return {
- myMessage: this.for
- }
- },
- template:`
- <div>
- <input type="tet" v-model="myMessage">
- </div>
- `
- })
父組件
- Vue.component('parent',{
- template:`
- <div>
- <p>this is parent compoent!</p>
- <child></child>
- </div>
- `,
- provide:{
- for:'test'
- },
- data(){
- return {
- message:'Hello'
- }
- }
- })
- var app=new Vue({
- el:'#app',
- template:`
- <div>
- <parent></parent>
- </div>
- `
- })
5. 中央事件總線
上面方式都是處理的父子組件之間的數據傳遞,那若是兩個組件不是父子關係呢?也就是兄弟組件如何通訊?
這種狀況下可使用中央事件總線的方式。新建一個Vue事件bus對象,而後經過bus.$emit觸發事件,bus.$on監聽觸發的事件。
- Vue.component('brother1',{
- data(){
- return {
- myMessage:'Hello brother1'
- }
- },
- template:`
- <div>
- <p>this is brother1 compoent!</p>
- <input type="text" v-model="myMessage" @input="passData(myMessage)">
- </div>
- `,
- methods:{
- passData(val){
- //觸發全局事件globalEvent
- bus.$emit('globalEvent',val)
- }
- }
- })
- Vue.component('brother2',{
- template:`
- <div>
- <p>this is brother2 compoent!</p>
- <p>brother1傳遞過來的數據:{{brothermessage}}</p>
- </div>
- `,
- data(){
- return {
- myMessage:'Hello brother2',
- brothermessage:''
- }
- },
- mounted(){
- //綁定全局事件globalEvent
- bus.$on('globalEvent',(val)=>{
- this.brothermessage=val;
- })
- }
- })
- //中央事件總線
- var bus=new Vue();
- var app=new Vue({
- el:'#app',
- template:`
- <div>
- <brother1></brother1>
- <brother2></brother2>
- </div>
- `
- })
6. parent和children
- Vue.component('child',{
- props:{
- value:String, //v-model會自動傳遞一個字段爲value的prop屬性
- },
- data(){
- return {
- mymessage:this.value
- }
- },
- methods:{
- changeValue(){
- this.$parent.message = this.mymessage;//經過如此調用能夠改變父組件的值
- }
- },
- template:`
- <div>
- <input type="text" v-model="mymessage" @change="changeValue">
- </div>
- })
- Vue.component('parent',{
- template:`
- <div>
- <p>this is parent compoent!</p>
- <button @click="changeChildValue">test</button >
- <child></child>
- </div>
- `,
- methods:{
- changeChildValue(){
- this.$children[0].mymessage = 'hello';
- }//在此我向你們推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提高思惟能力
- },
- data(){
- return {
- message:'hello'
- }
- }
- })
- var app=new Vue({
- el:'#app',
- template:`
- <div>
- <parent></parent>
- </div>
- `
- })
7. boradcast和dispatch
vue1.0中提供了這種方式,但vue2.0中沒有,但不少開源軟件都本身封裝了這種方式,好比min ui、element ui和iview等。 好比以下代碼,通常都做爲一個mixins去使用, broadcast是向特定的父組件,觸發事件,dispatch是向特定的子組件觸發事件,本質上這種方式仍是on和on和emit的封裝,但在一些基礎組件中卻很實用。
- function broadcast(componentName, eventName, params) {
- this.$children.forEach(child => {
- var name = child.$options.componentName;
- if (name === componentName) {
- child.$emit.apply(child, [eventName].concat(params));
- } else {
- broadcast.apply(child, [componentName, eventName].concat(params));
- }
- });
- }
- export default {
- methods: {
- dispatch(componentName, eventName, params) {
- var parent = this.$parent;
- var name = parent.$options.componentName;
- while (parent && (!name || name !== componentName)) {
- parentparent = parent.$parent;
- if (parent) {
- name = parent.$options.componentName;
- }
- }
- if (parent) {
- parent.$emit.apply(parent, [eventName].concat(params));
- }
- },
- broadcast(componentName, eventName, params) {
- broadcast.call(this, componentName, eventName, params);
- }
- }
- };
8. vuex處理組件之間的數據交互
若是業務邏輯複雜,不少組件之間須要同時處理一些公共的數據,這個時候纔有上面這一些方法可能不利於項目的維護,vuex的作法就是將這一些公共的數據抽離出來,而後其餘組件就能夠對這個公共數據進行讀寫操做,這樣達到了解耦的目的。
以爲不錯請點贊支持,歡迎留言或進個人我的羣855801563領取【架構資料專題目合集90期】、【BATJTMD大廠JAVA面試真題1000+】,本羣專用於學習交流技術、分享面試機會,拒絕廣告,我也會在羣內不按期答題、探討。