快捷導(dǎo)航

Vue組件之間的通信方式詳細(xì)講解

更新時(shí)間：2022年08月29日 14:36:06 作者：丘比特懲罰陸

對(duì)于vue來(lái)說(shuō)，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無(wú)法互相引用，一般來(lái)說(shuō)，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)

前言

在前面，我們已經(jīng)了解了vue的組件以及vue組件之間的層級(jí)關(guān)系，這個(gè)在博主的往期博客，感興趣的可以往前挪，地址是：

1、vue組件

2、vue組件的層級(jí)關(guān)系

本文主要編寫(xiě)記錄的是，組件之間的通信的模式以及通信的方式，我們的組件之間只能調(diào)用自己的屬性和自己的方法，不能調(diào)用其他組件的屬性以及方法，不過(guò)就是調(diào)用的話，那就是要用到數(shù)據(jù)通信，那樣才能調(diào)用該組件的屬性和方法。

我們的vue組件含有的最突出的是跨組件的數(shù)據(jù)流、自定義的事件通信以及構(gòu)建工具集成的。

一、父級(jí)傳數(shù)據(jù)給子級(jí)

1、傳輸固定的具體數(shù)據(jù)

我們通過(guò)一個(gè)代碼實(shí)例了解，父組件傳遞具體的數(shù)據(jù)給到子組件。

代碼實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>層級(jí)關(guān)系</title>
</head>
<body>
    <div id="app">
      <child msg="**大學(xué)"></child>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.component('child',{
            props:['msg'],
            template:
            `<h1>{{msg}}學(xué)生教務(wù)系統(tǒng)</h1>`
        });
var  vm = new Vue({
    el:"#app",
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

我們可以看到一個(gè)這樣的界面，當(dāng)在child組件通過(guò)props：['msg']定義了一個(gè)屬性msg，根組件就會(huì)調(diào)用child組件，將屬性msg里面的‘**大學(xué)’，把這個(gè)數(shù)據(jù)傳給child組件，所以這個(gè)組件才能顯示出來(lái)，因?yàn)檫@個(gè)值是固定的且具體的值，不能被改變的，所以這種方法又稱為字面量傳值。

2、動(dòng)態(tài)語(yǔ)法

動(dòng)態(tài)語(yǔ)法其實(shí)很簡(jiǎn)單，就類(lèi)似于使用v-bind將html的特性綁定到一個(gè)表達(dá)式中，可以使用v-bind將動(dòng)態(tài)的props綁定到父級(jí)組件的這些數(shù)據(jù)上面。當(dāng)父級(jí)組件的數(shù)據(jù)發(fā)生變化的時(shí)候，就將這一些變化發(fā)送到子組件當(dāng)中。這個(gè)不難理解，我們還是通過(guò)一些代碼來(lái)了解一下：

代碼實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件之間的傳遞</title>
</head>
<body>
    <div id="app">
      <child v-bind:msg='stage':open='open'></child>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.component('child',{
            template:       
            <div><h1>{{msg}}學(xué)生教務(wù)系統(tǒng)</h1>
                <h2 v-show='open'>放假了！進(jìn)不了！?。?lt;/h2></div>`,
                props:['msg','open'],
        });
var  vm = new Vue({
    el:"#app",
     data:{
        stage:"放假",
        open:true
     }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

我們可以看到child組件當(dāng)中，已經(jīng)定義了msg和open兩個(gè)教務(wù)系統(tǒng)的屬性，在父組件里面已經(jīng)使用了child組件，當(dāng)中使用了v-bind指令來(lái)綁定我們這兩個(gè)屬性，用來(lái)接收來(lái)自父組件的數(shù)據(jù)。我們組件之間可以是props指定驗(yàn)證要求，這個(gè)時(shí)候props得到的值是一個(gè)對(duì)象的值。

3、子組件調(diào)用父組件

這里我們可以解釋到父級(jí)組件調(diào)用我們子組件的時(shí)候通過(guò)綁定事件的時(shí)候，將這個(gè)方法傳遞給子組件，可以將子組件中通過(guò)$emit觸發(fā)這個(gè)事件。這個(gè)還是不難理解，我們可以通過(guò)代碼的方式來(lái)了解：

代碼實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件之間的傳遞</title>
</head>
<body>
    <div id="app">
      <child v-on:fmethod="show"></child>
      <p>{{msg}}</p>
    </div>
<template id="n1">
    <div><button @click="myclick">調(diào)用父組件</button></div>
</template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
    var clild = {
    template:"#n1",
    methods:{
        myclick(){this.$emit('fmethod');}
    }
};
var  vm = new Vue({
    el:"#app",
     data:{msg:""},
     methods:{
        show(){this.msg="這里是父級(jí)組件的方法";}
     },
     components:{child:clild}
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：當(dāng)我們點(diǎn)擊的時(shí)候就可以使得父級(jí)組件的show方法被執(zhí)行的。如下：

二、子級(jí)傳數(shù)據(jù)給父級(jí)

1、使用自定義事件

當(dāng)父級(jí)組件調(diào)用子級(jí)組件的時(shí)候，我們先通過(guò)一個(gè)v-on指令進(jìn)行一個(gè)自定義事件的綁定，在子組件當(dāng)中可以通過(guò)$emit將這個(gè)函數(shù)事件觸發(fā)，然后再父級(jí)組件中定義的處理函數(shù)的方法，通過(guò)這樣的傳遞參數(shù)將數(shù)據(jù)傳給父級(jí)組件，這個(gè)還是很簡(jiǎn)單可以理解的，我們通過(guò)代碼示例的方式來(lái)了解我們這一個(gè)定義，

實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件之間的傳遞</title>
</head>
<body>
    <div id="app">
      <child v-on:fmethod="show"></child>
      <p>{{msg}}</p>
    </div>
<template id="n1">
    <div><button @click="myclick">調(diào)用父組件的方法</button></div>
</template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
    var clild = {
    template:"#n1",
    data:function(){return {msg:"這里是來(lái)自子級(jí)組件的數(shù)據(jù)"}},
    methods:{
        myclick(){this.$emit('fmethod',this.msg);}
    }
};
var  vm = new Vue({
    el:"#app",
     data:{msg:""},
     methods:{
        show(data){this.msg=data;}
     },
     components:{child:clild}
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

當(dāng)單擊按鈕的時(shí)候，執(zhí)行myclick的方法，這個(gè)方法中的this.$emit這個(gè)命令就會(huì)觸發(fā)fmethod這個(gè)事件，進(jìn)行調(diào)用父組件里面show顯示這個(gè)方法，再使得this.msg作為實(shí)參傳進(jìn)去。如下：

2、$refs的使用

這個(gè)概念的時(shí)候，我們能知道在調(diào)用子級(jí)組件的時(shí)候使用ref屬性，通過(guò)$refs得到ref的屬性值對(duì)應(yīng)組件的實(shí)例，得到后父級(jí)組件就可以使用子組件，從而控制子組件的數(shù)據(jù)，同時(shí)還可以得到子組件的方法，概念很簡(jiǎn)單，我們可以通過(guò)代碼方式了解：

實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件之間的傳遞</title>
</head>
<body>
    <div id="app">
      <p>{{msg}}</p><button v-on:click="My_click()">訪問(wèn)子組件的數(shù)據(jù)和方法</button>
      <child ref="child1"></child>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
    var clild = {
    template:"#n1",
    data:function(){return {msg:"這里是來(lái)自子級(jí)組件的數(shù)據(jù)"}},
    methods:{
        myclick(){this.$emit('fmethod',this.msg);}
    }
};
var  vm = new Vue({
    el:"#app",
     data:{msg:"根組件data"},
     methods:{
        My_click(){
            console.log(this.$emit.child.msg1);
            this.$refs.child.show("已經(jīng)被調(diào)用");
        }
     },
     components:{
        child:{
            template:'<p>{{msg1}}</p>',
            data:function(){
                return {msg1:"子組件數(shù)據(jù)"}
            },
            methods:{
                show(data){
                    console.log("子組件方法"+data)
                }
            }
        }
     }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

3、同級(jí)別組價(jià)以及任意組件之間的數(shù)據(jù)傳遞

我們已經(jīng)知道了父子組件之前的數(shù)據(jù)傳遞，那么現(xiàn)在還得了解一下同級(jí)組件，時(shí)間總線可以用于任何組件之間的通信，以便用于來(lái)用解決跨級(jí)別傳遞的方法。

我們?cè)诔绦虼a中，要先定義事件總線，在使用事件總線的傳遞數(shù)據(jù)的兩個(gè)組件中，一個(gè)組件可以使用偵聽(tīng)時(shí)間；另一個(gè)組件又可以使用觸發(fā)事件。我們還是可以通過(guò)一個(gè)實(shí)例代碼了解一下：

實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件之間的傳遞</title>
</head>
<body>
    <div id="app">
     <component-one></component-one>
     <component-two></component-two>
    </div>
     <template id="n1">
        <div style="border: 1px solid blue;padding: 10px;margin: 10px;">
        我是哥哥，想要獲取到弟弟的數(shù)據(jù):{{msg1}}
        </div>
     </template>
     <template id="n2">
        <div style="border: 1px solid blue;padding: 10px;margin: 10px;">
        我是弟弟  
        <button @click="send">把弟弟的數(shù)據(jù)傳給哥哥</button>
        </div>
     </template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var bus = new Vue({});
var  vm = new Vue({
    el:"#app",
    components:{
        "component-one":{
            template:'#n1',
            data(){
                return {msg1:""}
            },
            mounted(){
                bus.$on("data-transmit",msgs2=>{
                    this.msg1 = msgs2
                })
            },
        },
        "component-two":{
            template:"#n2",
            data(){return {msg2:"我是弟弟的數(shù)據(jù)"}},
            methods:{
                send(){
                    bus.$emit("data-transmit",this.msg2);
                }
            }
        }
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：?jiǎn)螕舭粹o就可以把弟弟（組件）里面數(shù)據(jù)傳給到哥哥（組件）。