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