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
的額外引數