To quote a sentence from the official website: The relationship between parent and child components can be summarized as props are passed down and events are passed up. The parent component sends data to the child component through props, and the child component sends messages to the parent component through events, as shown in the following figure:
1, the parent component passes the value to the child component
code:
<template>
<div style="padding: 20px;">
<span>父组件</span><input type="text" v-model="textInfo" />
<ChildInfo :textInfo="textInfo"></ChildInfo>
</div>
</template>
<script>
import ChildInfo from '../../views/ChildInfo'
export default {
name: 'Home',
components: {ChildInfo},
data () {
return {
textInfo: ''
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<span>我是子组件：{
{textInfo}}</span>
</div>
</template>
<script>
export default {
name: 'ChildInfo',
props: {
textInfo: {
type: String,
required: true
}
}
}
</script>
<style scoped>
</style>
2. The child component passes the value to the parent component
<template>
<div style="padding: 20px;">
<span>父组件</span><input type="text" v-model="textInfo" />
<ChildInfo v-on:funb="funb"></ChildInfo>
</div>
</template>
<script>
import ChildInfo from '../../views/ChildInfo'
export default {
name: 'Home',
components: {ChildInfo},
data () {
return {
textInfo: ''
}
},
methods: {
funb (a) {
this.textInfo = a
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<span>我是子组件：{
{textInfo}}</span><button @click="funa"> 发送数据</button>
</div>
</template>
<script>
export default {
name: 'ChildInfo',
data () {
return {
textInfo: '我是子组件的数据'
}
},
methods: {
funa () {
this.$emit('funb', this.textInfo)
}
}
}
</script>
<style scoped>
</style>
3. Non-parent-child component passing value
To pass values between non-parent-child components, you need to define a public instance file bus.js as an intermediate warehouse to pass values, otherwise the effect of passing values between routing components will not be achieved.
The bus file can be understood as the parent component of components A and B. Component A registers an event to float to the bus file, and component B listens to the event under the bus file.
// bus.js
import Vue from 'vue'
export default new Vue()<template>
<div>
A组件:
<span>{
{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
import Bus from './bus'
export default {
name: 'ChildInfo',
data () {
return {
elementValue: 10
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
B组件:
<span>{
{elementValue}}</span>
</div>
</template>
<script>
import Bus from './bus'
export default {
name: 'ChildInfo2',
data () {
return {
elementValue: 0
}
},
mounted: function () {
var that = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
that.elementValue = data
})
},
methods: {
}
}
</script>
<style scoped>
</style>
Extended reading:
In addition to using the bus bus, vuex can also be used for communication between non-parent-child components in vue. The applicable scenarios of the two are different.
Bus is suitable for small projects and projects whose data is used by fewer components, but it is not suitable for medium and large project data used between many components. The bus is actually a publish-subscribe mode. Using vue's custom event mechanism, an event is released through $emit at the triggered place, and the event is monitored through $on on the page that needs to be monitored.
Vuex is suitable for medium and large projects, where data is shared among multiple components.
Publish and subscribe mode:
In software architecture , publish-subscribe is a messaging paradigm in which the sender of a message (called a publisher) does not directly send a message to a specific receiver (called a subscriber). Instead, the published messages are grouped into different categories without any knowledge of which subscribers (if any) might exist. Likewise, a Subscriber can express interest in one or more categories and only receive messages of interest without knowing which Publishers (if any) exist.
Reference article: