I. transfer value from parent component to child component

1. Create a child.vue under the src/components / folder

2. Create props in child.vue and add a new title attribute

<template>
	<div>
		<h1>child Sub components</h1>
		<div>{{title}}</div>
	</div>
</template>
<script>
export default {
  name: 'child',
  props:["title"],
}
</script>
<style scoped lang="less">

</style>

3. Register the child component in the parent component of parent.vue, add the child tag in the template, bind the title attribute in the tag, and assign a value in the data

<template>
	<div>
		<h1>parent Parent component</h1>
		<child v-bind:title="parentTitle"></child>
	</div>
</template>
<script>
import child from './child';//Reference subcomponent
export default {
  name: 'parent',
  data(){
	  return {
		  parentTitle:"hello,child"
	  }
  },
  components:{
	  child
  }
}
</script>
<style scoped lang="less">

</style>

Summary of value transfer from parent component to child component:

• The child component creates an attribute in props to receive the value from the parent component
• Register child component in parent component
• Add the properties created in the sub component props to the sub component tag
• Assign the value that needs to be passed to the subcomponent to this property

2. Transfer value from child component to parent component

1. Create a button in the sub component and bind a click event to the button

2. Use $emit to trigger a custom event in the function that responds to the click event, and pass a parameter

<template>
	<div>
		<h1>child Sub components</h1>
		<button @click="sendMsgToParent">Pass value to parent component</button>
	</div>
</template>
<script>
export default {
  name: 'child',
  methods:{
	  sendMsgToParent(){
		  this.$emit("listenToChildEvent","this message is from child")
	  }
  }
}
</script>
<style scoped lang="less">

</style>

3. Listen to the custom event in the child tag of the parent component and add a processing method that responds to the event

<template>
	<div>
		<h1>parent Parent component</h1>
		<child v-on:listenToChildEvent="showMsgFromChild"></child>
	</div>
</template>
<script>
import child from './child';//Reference subcomponent
export default {
  name: 'parent',
  data(){
  },
  components:{
	  child
  },
  methods:{
	  showMsgFromChild(msg){
		  console.log(msg)
	  }
  }
}
</script>
<style scoped lang="less">

</style>

Summary of value transfer from child component to parent component:

• The subcomponent needs to trigger a custom event in some way, such as by clicking on the event
• Take the value to be passed as the second parameter of $emit, which will be passed as an argument to the method responding to the custom event
• Register the child component in the parent component and bind the listening to the custom event on the child component label

In a word, in communication, whether a child component transfers values to a parent component or a parent component transfers values to a child component, they all have one thing in common: there is an intermediate medium, the child to parent medium is a custom event, and the parent to child medium is an attribute in props.