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