vue组件间通信解析(2)

<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 )

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzgww.html