vue組件之間的通信

vue組件間的通信有父--->子、子--->父、非父子之間的通信 雖然我們稍微複雜的項目都用vuex來管理了,但是還是想寫一篇關於有父--->子、子--->父、非父子 之間通信的文章。下面通過代碼來講述 父--->子組件間的通信 父級頁面: <template> <div id="app"> <Header :parentMsg='parentMsg' > </Header> </div> </template> import Header from './components/header' export default { name: 'App', data () { return { parentMsg: '你訪問的是父級頁面的數據', } }, components:{ Header, } } 子頁面: <template> <div> <div >{{parentMsg}}</div> </div> </template> export default { name: 'Header', props:['parentMsg'], //接收父級頁面傳過來的數據 data(){ return { parentMsg:'' } } } 子--->父組件間的通信 父級頁面: <template> <div id="app"> <Header :parentMsg='parentMsg' @tanster='getuser'> </Header> <p> 父級頁面接收子頁面的數據:{{user}} </p> </div> </template> <script> import Header from './components/header' export default { name: 'App', data () { return { parentMsg: '你訪問的是父級頁面的數據', user:'' } }, components:{ Header, }, methods:{ getuser(msg){ this.user=msg //接收子頁面傳過來的數據 } } } </script> 子頁面: <template> <div> <div >{{parentMsg}}</div> <p>header頁面{{msg}}</p> <input v-model="msg" @change=getuser()> </div> </template> <script> export default { name: 'Header', props:['parentMsg'], data(){ return { msg:'' } }, methods:{ getuser(){ // 傳給父組件 this.$emit('tanster',this.msg) //傳給父級頁面 }, } } </script> 非父子組件頁面間的通信,可以使用EventBus 使用EventBus首先需要新建一個EventBus.js,代碼如下: import Vue from 'vue' export default new Vue() // import Vue from 'vue' // const EventBus = new Vue() // export {EventBus} 子頁面1: <template> <div> <input v-model="msg"> <button @click="send()">send</button> </div> </template> <script> import EventBus from '../assets/js/EventBus' export default { name: 'Header', data(){ return { msg:'' } }, methods:{ send(){ EventBus.$emit('sub-msg',this.msg); //向頁面2發送數據 } } } </script> 子頁面2: <template> <div> <p>sub頁面接收header頁面傳過來的數據:<span>{{msg}}</span></p> </div> </template> <script> import EventBus from '../assets/js/EventBus' export default { name: 'Sub', data(){ return { msg:'' } }, mounted(){ EventBus.$on('sub-msg',function(msg){ this.msg=msg; //接收頁面1傳過來的數據 }.bind(this)); } } </script> 以上就是組件間同信的三種方式,還有一種通信就是vuex,vuex在本文就不寫了,之前寫過一篇對vuex 的使用及理解。針對一些數據比較難管理的項目來說還是用vuex,方便數據的管理。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章