Pass values between parent and child components (props/$emit) :
The parent component:
<childerComponent :fatherVal="fatherVal" @backValFather="backValFather"></childerComponent> data(){
FatherVal :' I'm the value of the parent component '
},
methods:{
backValFather(val){
console.log(val); //' I am the value passed from child to parent '
}
}
Child components:
<div @click="triggerClick"></div>
props:['fatherVal'],
created:{
console.log(this.fatherVal); //' I am the value of parent component '
},
methods:{
triggerClick(){
This.$emit('backValFather',' I am the value passed from child to parent ')
}
}
Getting values or methods between parent and child components (ref/parent)
Parent component gets child component:
<childerComponent ref="childerComponentRef"></childerComponent>
This $refs. ChilderComponentRef. Val/val child component data of data or method name (add () method)
Child component gets parent component:
this.$parent.parentVal
Pass values between non-parent and child components (here I describe my usual eventBus approach)
1. Create a public file (for example, eventbus. js) and add it to the eventbus. js file:
import Vue from 'vue'; export default new Vue;
Introduced into two components that need to pass messages
import EventBus from '@/components/utils/EventBus.js';
2. In the file that sends the message
EventBus.$emit(‘msgEvent’,’ sent value ‘)
3. In the file receiving the message
// Note that ventbus. on can only be used in created or Mounted, otherwise it does not work. ‘eventbus. on(‘msgEvent’,(e) => {//e received value})