在开发中，有时候为了让一个文件中代码更简化和重复利用 会将一些代码放在一个文件里作为组件使用
首先创建项目，然后在components里面创建一个文件Hello.vue
之后在里面写上模板代码
<template>
</template>
<script>
export default {
}
</script>
<style scoped lang="scss">
</style>
来到你要引用组件的那个文件
引入组件
import Hello from '@/components/Hello.vue'
components: {
Hello
}
该界面完整代码
<template>
<div>
这是主界面
</div>
</template>
<script>
import Hello from '@/components/Hello.vue'
export default {
components: {
Hello
}
}
</script>
然后在界面应用组件，绑定变量
<template>
<div>
<Hello msg="这是子组件">
</Hello>
</div>
</template>
然后子组件进行接收
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
props: {
msg:{
type:String
}
}
}
</script>
运行效果
这种只能绑定简单的信息，可以结合data绑定更多复杂的信息
将数据放在data里面，然后再传给子组件
<template>
<div>
<Hello :msg="msg">
</Hello>
</div>
</template>
<script>
import Hello from '@/components/Hello.vue'
export default {
data() {
return {
msg: '把data里数据取出来'
}
},
components: {
Hello
}
}
</script>
