preface
If you want to have a better understanding of value transmission from non-parent components, you should first understand the thinking logic of value transmission from parent to child, so that you can better understand the value transmission from non-parent components.
Non-parent component value passing (sibling component value passing)
- The first thing to understand about non-parent component passing is to understand
$emit
和$on
,$emit(event,data)
There are two parameters in there: the first parameter is the type of event that was fired, the second value is the parameter that triggered the event,$on(event, callFn(data))
The same$on
There are also two parameters, the first parameter is the bound event type, the second value is the bound event corresponding to the callback function, insidedata
The value is$emit
The value passed from.
1. Define a BUS (an instance of vUE that receives and fires events) as follows:
import Vue from 'vue'
export default new Vue()
Copy the code
2. First introduce the component to the page
<template>
<div class="home">
<childrenOne></childrenOne>
<children></children>
</div>
</template>
<script>
// Introduce public pages
import children from './children.vue'
import childrenOne from './childrenOne.vue'
export default {
name: 'Home'.data(){},
components: {/ / register
children,
childrenOne
}
}
</script>
Copy the code
3. Pass the data into an intermediate variable (BUS) in the childOne component as follows
<template>
<div>
$emit{{namea}}
</div>
</template>
<script>
import bus from '.. /utli/bus'
export default {
data(){
return{
namea:"Who am I?".listone:'3332113221'}},created() {
// Pass the value into the bus
bus.$emit("woshishi".this.namea)
},
}
</script>
<style lang="less"></style>
Copy the code
4. Use $on in another component to listen for values in bus intermediate variables and display them on the page
<template>
<div>
$on{{namea}}
</div>
</template>
<script>
import bus from '.. /utli/bus'
export default {
data(){
return{
namea:"wss"}},created() {
bus.$on("woshishi".(val) = >{
this.namea = val
})
},
}
</script>
<style lang="less">
</style>
Copy the code