您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
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中怎么实现组件间通信问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。