Briefly record several communication methods between components in vue
1. Pass from parent to child, define "props" in the child component to receive;
For props value transfer restrictions and rules, please refer to the official website:Props | Vue.js
father:
<template>
<div>
<div>我是父组件</div>
<children :father="father"></children>
</div>
</template>
<script>
import children from './children.vue'
export default {
data() {
return {
father: '这是父组件传递过来的值'
}
},
components: {
children
},
methods: {
}
}
</script>
<style>
</style>
Child:
<template>
<div>我是子组件：<span style="color: blue;">{
{father}}</span>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: ['father'],
}
</script>
<style>
</style>
2. Pass from child to parent: The child component passes a custom event, and then the parent component obtains the passed value by listening to the event of the child component.
The child component defines this.$emit('myFun',value) and the parent component obtains the passed value through @myFun. The code is as follows
father:
<template>
<div>
<div>我是父组件:
<span style="color:blue">{
{value}}</span>
</div>
<children @myFun="receive"></children>
</div>
</template>
<script>
import children from './children.vue'
export default {
data() {
return {
value: '',
}
},
components: {
children
},
methods: {
receive(val) {
this.value = val
},
}
}
</script>
<style>
</style>
Child:
<template>
<div>
<div>我是子组件</div>
<button @click="btn">传递</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
btn() {
this.$emit('myFun', '子组件传递过来的值')
},
}
}
</script>
<style>
</style>
3. Data transfer between sibling components: Use the triggering and monitoring capabilities of the defined event emit to define a public event bus, which serves as an intermediate bridge to achieve communication between components.
First create the bus.js file
import Vue from 'vue'
export default new Vue()
father:
<template>
<div>
<div>我是父组件</div>
<children></children>
<children2></children2>
</div>
</template>
<script>
import children from './children.vue'
import children2 from './children2.vue'
export default {
data() {
return {}
},
components: {
children,
children2
},
methods: {
}
}
</script>
<style>
</style>
Child 1:
<template>
<div>
<div>我是子组件1：</div>
<button @click="btn">传递</button>
</div>
</template>
<script>
import bus from './bus.js'
export default {
data() {
return {
}
},
methods: {
btn() {
bus.$emit('myFun', '子组件1传递是值')
},
}
}
</script>
<style>
</style>
Child 2:
<template>
<div>我是子组件2：<span style="color: blue;">{
{value}}</span></div>
</template>
<script>
import bus from './bus.js'
export default {
data() {
return {
value: '',
}
},
mounted() {
bus.$on('myFun', (val) => {
this.value = val
})
}
}
</script>
<style>
</style>
The above are the most commonly used methods of data transfer between components. There are also storage transfer, vuex transfer, routing transfer, $refs, etc. that will be added later.