组件传值之父传子

在开发中，有时候为了让一个文件中代码更简化和重复利用
会将一些代码重新放在一个文件里作为组件使用

首先创建项目，然后在components里面创建一个文件Hello.vue

之后在里面写上模板代码

<template>
	
</template>

<script>
	export default {


	}
</script>

<style scoped lang="scss">

</style>


复制代码

来到你要引用组件的那个文件

引入组件

import Hello from '@/components/Hello.vue'
复制代码

components: {
			HelloWorld
		}

复制代码

该界面完整代码

<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>
复制代码