您好,登錄后才能下訂單哦!
vue中怎么實(shí)現(xiàn)組件間通信,針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
父組件傳子組件
父傳子方法(一) 屬性傳遞 props
//子組件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export default { props : { dataList : [] } } </script>
//父組件 <template> <component-child v-bind:data-list="dataList"> </component-child> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input> </template> <script> import ComponentChild from './child.vue' export default { data () { return { dataInput: "", dataList : [ 'hello world!','welcome to use vue.js' ] } }, components : { ComponentChild }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } self.dataList.push( self.dataInput ) self.dataInput = "" } } } </script>
父傳子方法(二) 廣播事件傳遞 vm.$broadcast
//子組件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, events : { addChildDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } } } </script>
//父組件 <template> <component-child></component-child> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input> </template> <script> import ComponentChild from './child.vue' export default { data () { return { dataInput: "" } }, components : { ComponentChild }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //廣播到子組件 self.$broadcast( 'addChildDataEvent', self.dataInput ) self.dataInput = "" } } } </script>
子組件傳父組件
子傳父方法 派遣事件傳遞 vm.$dispatch
//子組件 <template> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input> </template> <script> export default { data () { return { dataInput: "" } }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //派遣事件到父組件 self.$dispatch( 'addFatherDataEvent', self.dataInput ) self.dataInput = "" } } } </script>
//父組件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> <component-child></component-child> </template> <script> import ComponentChild from './child.vue' export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, components : { ComponentChild }, events : { addFatherDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } } } </script>
兄弟組件互傳
父組件代理傳遞 子(vm.dispatch )父 ( vm.broadcast )子 事件方法傳遞
<template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, events : { addChildDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } } } </script>
<template> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input> </template> <script> export default { data () { return { dataInput: "" } }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //派遣事件到父組件 self.$dispatch( 'agentDataEvent', self.dataInput ) self.dataInput = "" } } } </script>
<template> <component-child1></component-child1> <component-child2></component-child2> </template> <script> import ComponentChild1 from './child1.vue' import ComponentChild2 from './child2.vue' export default { components : { ComponentChild1, ComponentChild2 }, events : { agentDataEvent : function( dataInput ) { this.$broadcast('addChildDataEvent', dataInput) } } } </script>
實(shí)例間通信
把實(shí)例當(dāng)做參數(shù)傳入另一個(gè)實(shí)例
<template> <div> <p>實(shí)例間通信</p> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </div> </template> <script> export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, events : { addDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } } } </script>
<template> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input> </template> <script> export default { data () { return { dataInput: "", otherApp : {} } }, methods : { addDataItem ( ) { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //觸發(fā)其他實(shí)例事件 self.otherApp.$emit( 'addDataEvent', self.dataInput ) self.dataInput = "" }, setOtherApp ( app ) { this.otherApp = app } } } </script>
import Vue from "vue" import App1 from "./communication5/app1.vue" import App2 from "./communication5/app2.vue" let AppVM1 = new Vue( App1 ).$mount('#app') let AppVM2 = new Vue( App2 ).$mount('#app2') AppVM2.setOtherApp( AppVM1 )
關(guān)于vue中怎么實(shí)現(xiàn)組件間通信問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。