In development, some code is sometimes used as a component in a file in order to simplify and reuse code in a file

First create the project, then create a file hello.vue inside components

Then write the template code inside

<template>
	
</template>

<script>
	export default {


	}
</script>

<style scoped lang="scss">

</style>


Copy the code

Go to the file where you want to reference the component

The introduction of the component

import Hello from '@/components/Hello.vue'
Copy the code
components: {
			Hello
		}

Copy the code

The interface complete code

</div> </template> <script> import Hello from '@/components/ hello. vue' export default { components: { Hello } } </script>Copy the code

Then apply components to the interface and bind variables

<template> <div> <Hello MSG =" This is a child component "> </Hello> </div> </template>Copy the code

The child component then receives

<template>
	<div>
		{{msg}}
	</div>
</template>

<script>
	export default {
		props: {
			msg:{
				type:String
			}
		}

	}
</script>

Copy the code

Running effect

This can only bind simple information, but can bind more complex information with data

Put the data inside the data and then pass it to the child components

<template> <div> <Hello :msg="msg"> </Hello> </div> </template> <script> import Hello from '@/components/Hello.vue' Export default {data() {return {MSG: 'fetch data'}, components: {Hello}} </script>Copy the code