Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

1. Parent component passes value to child component

1. Parent component.vue
2. Subcomponent.vue

2. Values can also be transferred between sibling components through the middleware Bus

1.A component.js
2.B component.js

3. Subcomponents pass values to parent components

1. Parent component.js
2. Subcomponent.js

Summarize:

1. Parent component passes value to child component

1. Parent component.vue

// <template> in parent component
    <div>
        <Child ref="child" :title="value"/>
    </div>
</template>    
<script>
export default {
    data() {
    	return {
    		value: 'hello world!'
    	}
    }
}
</script>

2. Subcomponent.vue

// <template> in parent component
    <div>
       <span>{{title}}</span>    
    </div>
</template>    
<script>
export default {
  props: {
    title:
      	type: String,
      	default: ''
    }
  }
}
</script>

//The title value is 'hello world!

2. Values can also be transferred between sibling components through the middleware Bus

$emit Passing Values

$on take over

$off removes the transfer event

1.A component.js

this.$bus.$emit("flag",true)

2.B component.js

mounted() {
    this.$bus.$off('flag')
    this.$bus.$on('flag', data=> {
      this.flag = data
    })
  }

3. Subcomponents pass values to parent components

1. Parent component.js

<template>
    <div>
        <Child ref="child" @getTitle="getTitle"/>
    </div>
</template>  
<script>
import Child from './components/Child'
export default {
  components:
  	Child 
  },
  data() {
    return {
    }
  },
  method:{
  	getTitle(data){
		console.log(data)
	}
  }
}
</script>

The print result is hello xuliting

2. Subcomponent.js

<template>
    <div>
       <span>{{title}}</span> 
    </div>
</template>    
<script>
export default {
  data() {
    return {
    title: 'hello xuliting'
    }
  },
  mounted(){
    this.getFun()
  },
  method:{
    getFun(){
     this.$emit("getTiltle",this.title)
    }
  }
}
</script>

Summarize:

The problem can also be solved by transferring methods between components. For example, the parent component is A, and the child components are B and C.

The method that parent component A calls child component B is defined as aFun, and aFun is passed to child component C.

This is the method passed to component C in the parent component

<C :a-fun="aFun" />

The reference is in component C, through props

props: {
    aFun: {
      type: Function,
      default: () => function() {}
    }
  }

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

A brief discussion on Vue3 father-son value transfer
Detailed explanation of Vue parent-child component value transfer and one-way data flow issues
Vue parent-child component mutual value transfer and call
Detailed explanation of Vue's seven value transfer methods
Some pitfalls of Vue parent-child component value transfer
Example of passing values between vue child components and parent components

<<: The difference between VOLUME and docker -v in Dockerfile

>>: How many pixels should a web page be designed in?