vue组件间通信解析
组件间通信（父子，兄弟）
相关链接\组件通信：点击查看
学习链接：Vue.js——60分钟快速入门
分分钟玩转Vue.js组件点击查看
父组件传子组件
父传子方法（一）属性传递props
//子组件
<template>
<ul>
<liv-for="itemindataList">{{item}}</li>
</ul>
</template>
<script>
exportdefault{
props:{dataList:[]}
}
</script>
//父组件
<template>
<component-childv-bind:data-list="dataList"></component-child>
<inputv-model="dataInput"v-on:keyup.13="addDataItem()"></input>
</template>
<script>
importComponentChildfrom'./child.vue'
exportdefault{
data(){
return{
dataInput:"",
dataList:['helloworld!','welcometousevue.js']
}
},
components:{ComponentChild},
methods:{
addDataItem(){
letself=this
if(!(self.dataInput&&self.dataInput.length>0)){return}
self.dataList.push(self.dataInput)
self.dataInput=""
}
}
}
</script>
父传子方法（二）广播事件传递vm.$broadcast
//子组件
<template>
<ul>
<liv-for="itemindataList">{{item}}</li>
</ul>
</template>
<script>
exportdefault{
data(){
return{
dataList:['helloworld!','welcometousevue.js']
}
},
events:{
addChildDataEvent:function(dataInput){
this.dataList.push(dataInput)
}
}
}
</script>
//父组件
<template>
<component-child></component-child>
<inputv-model="dataInput"v-on:keyup.13="addDataItem()"></input>
</template>
<script>
importComponentChildfrom'./child.vue'
exportdefault{
data(){
return{dataInput:""}
},
components:{ComponentChild},
methods:{
addDataItem(){
letself=this
if(!(self.dataInput&&self.dataInput.length>0)){return}
//广播到子组件
self.$broadcast('addChildDataEvent',self.dataInput)
self.dataInput=""}
}
}
</script>
子组件传父组件
子传父方法派遣事件传递vm.$dispatch
//子组件
<template>
<inputv-model="dataInput"v-on:keyup.13="addDataItem()"></input>
</template>
<script>
exportdefault{
data(){
return{
dataInput:""
}
},
methods:{
addDataItem(){
letself=this
if(!(self.dataInput&&self.dataInput.length>0)){return}
//派遣事件到父组件
self.$dispatch('addFatherDataEvent',self.dataInput)
self.dataInput=""
}
}
}
</script>
//父组件
<template>
<ul>
<liv-for="itemindataList">{{item}}</li>
</ul>
<component-child></component-child>
</template>
<script>
importComponentChildfrom'./child.vue'
exportdefault{
data(){
return{
dataList:['helloworld!','welcometousevue.js']
}
},
components:{ComponentChild},
events:{
addFatherDataEvent:function(dataInput){
this.dataList.push(dataInput)
}
}
}
</script>
兄弟组件互传
父组件代理传递子(vm.dispatch）父(vm.broadcast)子事件方法传递
<template>
<ul>
<liv-for="itemindataList">{{item}}</li>
</ul>
</template>
<script>
exportdefault{
data(){
return{
dataList:['helloworld!','welcometousevue.js']
}
},
events:{
addChildDataEvent:function(dataInput){
this.dataList.push(dataInput)
}
}
}
</script>
<template>
<inputv-model="dataInput"v-on:keyup.13="addDataItem()"></input>
</template>
<script>
exportdefault{
data(){
return{dataInput:""}
},
methods:{
addDataItem(){
letself=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>
importComponentChild1from'./child1.vue'
importComponentChild2from'./child2.vue'
exportdefault{
components:{ComponentChild1,ComponentChild2},
events:{
agentDataEvent:function(dataInput){
this.$broadcast('addChildDataEvent',dataInput)
}
}
}
</script>
实例间通信
把实例当做参数传入另一个实例
<template>
<div>
<p>实例间通信</p>
<ul>
<liv-for="itemindataList">{{item}}</li>
</ul>
</div>
</template>
<script>
exportdefault{
data(){
return{
dataList:['helloworld!','welcometousevue.js']
}
},
events:{
addDataEvent:function(dataInput){
this.dataList.push(dataInput)
}
}
}
</script>
<template>
<inputv-model="dataInput"v-on:keyup.13="addDataItem()"></input>
</template>
<script>
exportdefault{
data(){
return{
dataInput:"",
otherApp:{}
}
},
methods:{
addDataItem(){
letself=this
if(!(self.dataInput&&self.dataInput.length>0)){return}//触发其他实例事件
self.otherApp.$emit('addDataEvent',self.dataInput)
self.dataInput=""
},
setOtherApp(app){
this.otherApp=app
}
}
}
</script>
importVuefrom"vue"
importApp1from"./communication5/app1.vue"
importApp2from"./communication5/app2.vue"
letAppVM1=newVue(App1).$mount('#app')
letAppVM2=newVue(App2).$mount('#app2')
AppVM2.setOtherApp(AppVM1)
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。