vue組件間通信解析
更新時間：2017年03月01日 14:50:31 作者：vichily
這篇文章主要為大家詳細介紹了vue組件間通信解析，具有一定的參考價值，感興趣的小伙伴們可以參考一下
組件間通信（父子，兄弟）
相關鏈接\組件通信：點擊查看
學習鏈接：Vue.js——60分鐘快速入門點擊查看
分分鐘玩轉(zhuǎn)Vue.js組件點擊查看
父組件傳子組件
父傳子方法（一） 屬性傳遞 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>
實例間通信
把實例當做參數(shù)傳入另一個實例
<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 } //觸發(fā)其他實例事件
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.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue組件化開發(fā)的思考以及相關的原理介紹，如果你對此有興趣，可以學習參考下。2018-02-02
Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣，那么Vue.set()和this.$set()的區(qū)別是什么，本文詳細的介紹一下，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了vue 自定義組件的寫法與用法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值 ,需要的朋友可以參考下2020-03-03
vue中實現(xiàn)當前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)(實例代碼)
這篇文章主要介紹了vue中實現(xiàn)當前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
vue elementUI table 自定義表頭和行合并的實例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了Vue彈窗組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue配置多代理服務接口地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue+Elementui el-tree樹只能選擇子節(jié)點并且支持檢索功能
這篇文章給大家介紹了Vue+Element UI el-tree樹只能選擇子節(jié)點并且支持檢索的文章,通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-12-12
vue中使用過濾器filters的this為undefined的問題
這篇文章主要介紹了vue中使用過濾器filters的this為undefined的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12