当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue组件间通信解析

vue组件间通信解析

2018年05月03日  | 移动技术网IT编程  | 我要评论

ca4393,赌神之人鬼合一,上海政法综治网

组件间通信（父子，兄弟）

相关链接\组件通信：

学习链接：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组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网