組件間通信（父子，兄弟）
相關鏈接/組件通信：點擊查看
學習鏈接：Vue.js――60分鐘快速入門點擊查看
分分鐘玩轉Vue.js組件點擊查看
父組件傳子組件
父傳子方法（一） 屬性傳遞 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>實例間通信
把實例當做參數傳入另一個實例
<template> <div> <p>實例間通信</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 } //觸發其他實例事件 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 )本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
