vue實現父子元件、兄弟元件間通訊
阿新 • • 發佈：2018-12-15
-
父傳子
父元件（app.vue）<template> <div id="app"> <hello-world :person="user"></hello-world> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { data(){ return { user:{ name: '兔子小聲',age: 12,weight:'50kg' } } }, components:{ HelloWorld } } </script> <style> </style>子元件（HelloWorld.vue）
<template> <div class="chind"> <div>{{person.name}}</div> <br/> <div>{{person.age}}</div> <br/> <div>{{person.weight}}</div> </div> </template> <script> export default { props:['person']//主要是通過props來接受父元件傳過來的值 } </script> <style scoped> </style> -
子傳父
父元件（app.vue）<template> <div id="app"> <hello-world @child-msg="ListenChild"></hello-world> <div>{{childWorld}}</div> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { data(){ return { childWorld: '這是父元件' } }, components:{ HelloWorld }, methods:{ ListenChild:function(msg){ this.childWorld=msg; } } } </script> <style> </style>子元件（HelloWorld.vue）
<template> <button @click="transfer">點我</button> </template> <script> export default { data: function () { return { msg: '我是子元件，我要傳給父元件' } }, methods: { transfer: function(){ this.$emit('child-msg',this.msg); } } } </script> <style scoped> </style> -
兄弟元件間傳值
<template> <div id="app"> <bro0></bro0> <bro2></bro2> </div> </template> <script> import Vue from 'vue'; var bus = new Vue();//這個物件沒有其他含義，僅僅就是一個資訊物件 Vue.component("bro0",{ template:"<div><button @click='send'>組建一</button></div>", data:function () { return { person : {name:'小明'} } }, methods:{ send:function () { bus.$emit("bro",this.person);//$emit這個方法會觸發一個事件 } } }); Vue.component("bro2",{ data:function () { return{ bro:{} } }, template:"<div>我是第二個元件--{{bro.name}}</div>", created:function () { var that=this; bus.$on("bro",function (msg) { that.bro=msg; }) } }); </script> <style> </style>
總結：
父傳子：
1.子元件在props中建立一個屬性，用以接收父元件傳過來的值
2.父元件中註冊子元件
3.在子元件標籤中繫結子元件props中建立的屬性
子傳父：
1.子元件中註冊一個事件來觸發一個該自定義事件，將需要傳的值作為$emit的第二個引數，並作為實參傳給響應自定義事件的方法；
2.在父元件中註冊子元件並在子元件標籤上繫結對自定義事件的監聽（這裡父元件同樣需要一個事件來監聽子元件註冊的自定義事件，並在第二個引數上接受子元件傳過來的引數）
兄弟元件（此處例項已改）：
1.建立中轉匯流排，在src/assets/下建立一個transfer.js,只建立了一個新的Vue例項，起元件之間通訊的橋樑作用；
2.在trsFun函式中用$emit觸發了一個click事件，並傳遞了一個引數,$emit例項方法觸發當前例項(此處的當前例項指向bus)上的事件,附加引數都會傳給監聽器回撥；
3.$on監聽當前例項上的事件(此處當前例項為transfer)。事件可以由$emit觸發，回撥函式會接收所有傳入事件觸發函式$emit的額外引數