vue组件间通信解析
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了vue组件间通信解析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
组件间通信(父子,兄弟)
相关链接\组件通信:
学习链接: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> <ponent-child v-bind:data-list="dataList"> </ponent-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!','wele to use vue.js' ] } }, ponents : { 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!', 'wele to use vue.js' ] } }, events : { addChildDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } } } </script>
//父组件 <template> <ponent-child></ponent-child> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input> </template> <script> import ComponentChild from './child.vue' export default { data () { return { dataInput: "" } }, ponents : { 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> <ponent-child></ponent-child> </template> <script> import ComponentChild from './child.vue' export default { data () { return { dataList : [ 'hello world!', 'wele to use vue.js' ] } }, ponents : { 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!', 'wele 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> <ponent-child1></ponent-child1> <ponent-child2></ponent-child2> </template> <script> import ComponentChild1 from './child1.vue' import ComponentChild2 from './child2.vue' export default { ponents : { 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!', 'wele 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 "./munication5/app1.vue" import App2 from "./munication5/app2.vue" let AppVM1 = new Vue( App1 ).$mount('#app') let AppVM2 = new Vue( App2 ).$mount('#app2') AppVM2.setOtherApp( AppVM1 )
本文已被整理到了《》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:JavaScript拖动层Div代码
下一篇:性能优化之代码优化页面加载速度
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程