vue中怎么实现组件间通信

发布时间:2021-07-09 11:23:11 作者:Leah
来源:亿速云 阅读:154

vue中怎么实现组件间通信,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

父组件传子组件

父传子方法(一) 属性传递 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中怎么实现组件间通信问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

推荐阅读:
  1. Vue中如何实现组件间通信
  2. vue中实现组件间通信的方式有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:Vue2中怎么实现一个无限级分类

下一篇:vue中怎么实现父子模版嵌套

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》