Communication between components (father and son, brother)
Related links\Component communication:Click to view
Learning link: - 60 minutes quick startClick to view
Play with components in minutesClick to view
Parent component passes child component
Method of passing the father to the son (I)Properties pass props
//Subcomponent<template>
<ul>
<li v-for="item in dataList">{{item}}</li>
</ul>
</template>
<script>
export default {
props : { dataList : [] }
}
</script>
// Parent component<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 './'
export default {
data () {
return {
dataInput: "",
dataList : [ 'hello world!','welcome to use ' ]
}
},
components : { ComponentChild },
methods : {
addDataItem () {
let self = this
if( !( && > 0) ) { return }
( )
= ""
}
}
}
</script>
Method of passing the father to the son (II)Broadcast event delivery vm.$broadcast
//Subcomponent<template>
<ul>
<li v-for="item in dataList">{{item}}</li>
</ul>
</template>
<script>
export default {
data () {
return {
dataList : [ 'hello world!', 'welcome to use ' ]
}
},
events : {
addChildDataEvent : function ( dataInput ) {
( dataInput )
}
}
}
</script>
// Parent component<template>
<component-child></component-child>
<input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>
<script>
import ComponentChild from './'
export default {
data () {
return { dataInput: "" }
},
components : { ComponentChild },
methods : {
addDataItem () {
let self = this
if( !( && > 0) ) { return }
//Broadcast to subcomponent self.$broadcast( 'addChildDataEvent', )
= "" }
}
}
</script>
Child component passes parent component
Son pass parent method Send event delivery vm.$dispatch
//Subcomponent<template>
<input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>
<script>
export default {
data () {
return {
dataInput: ""
}
},
methods : {
addDataItem () {
let self = this
if( !( && > 0) ) { return }
//Send events to parent component self.$dispatch( 'addFatherDataEvent', )
= ""
}
}
}
</script>
// Parent component<template>
<ul>
<li v-for="item in dataList">{{item}}</li>
</ul>
<component-child></component-child>
</template>
<script>
import ComponentChild from './'
export default {
data () {
return {
dataList : [ 'hello world!', 'welcome to use ' ]
}
},
components : { ComponentChild },
events : {
addFatherDataEvent : function ( dataInput ) {
( dataInput )
}
}
}
</script>
Brothers components are passed on
Parent component agent passes child ( ) parent ( ) child event method pass
<template>
<ul>
<li v-for="item in dataList">{{item}}</li>
</ul>
</template>
<script>
export default {
data () {
return {
dataList : [ 'hello world!', 'welcome to use ' ]
}
},
events : {
addChildDataEvent : function ( dataInput ) {
( 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( !( && > 0) ) { return } //Send events to parent component self.$dispatch( 'agentDataEvent', )
= ""
}
}
}
</script>
<template>
<component-child1></component-child1>
<component-child2></component-child2>
</template>
<script>
import ComponentChild1 from './'
import ComponentChild2 from './'
export default {
components : { ComponentChild1, ComponentChild2 },
events : {
agentDataEvent : function( dataInput ) {
this.$broadcast('addChildDataEvent', dataInput)
}
}
}
</script>
Inter-instance communication
Pass the instance as a parameter to another instance
<template>
<div>
<p>Inter-instance communication</p>
<ul>
<li v-for="item in dataList">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
dataList : [ 'hello world!', 'welcome to use ' ]
}
},
events : {
addDataEvent : function ( dataInput ) {
( 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( !( && > 0) ) { return } //Trigger other instance events .$emit( 'addDataEvent', )
= ""
},
setOtherApp ( app ) {
= app
}
}
}
</script>
import Vue from "vue"
import App1 from "./communication5/"
import App2 from "./communication5/"
let AppVM1 = new Vue( App1 ).$mount('#app')
let AppVM2 = new Vue( App2 ).$mount('#app2')
( AppVM1 )
This article has been compiled intoFront-end component learning tutorial》, everyone is welcome to learn and read.
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.