vue父组件向子组件传值的方式

父组件向子组件传值

定义组件

	//1.全局定义的方式
	Vue.component('com1',{
		template:'<p>这个就是全局创建的组件哦</p>'
	})
	//2.也可以将第二个参数提出来
	var temp = {
	template:'<h3>提取出来第二个参数创建的</h3>'
	Vue.component('com2',temp)
	//3.使用标签创建
	<template id='temp3'>
		<p>这里是使用标签来作为模板创建的</p>
	</template>
	// 组件注册
	Vue.component('com3',{
		template:'#temp3'}
		)

• 标签创建好后直接使用组件名放置在html中即可生效。

父组件传值给子组件

//父组件模板
<template>
	<div>
		this is father
		<com1 :fmsg='msg'></com1> 
	</div>
</template>
//实例Vue对象

var vm = new Vue({
	el:'#app', // 容器对象
	components:[ // 私有组件的创建方式
		fa:{ //键名等同于组件名
			template: '#fa',
			data:function(){
				msg:'父组件的msg'
			},
			//这里定义子组件
			components:{
				com1:{
					//子组件模板
					template:'<h3>this is 子组件{{fmsg}}</h3>'
					props:['fsmg']//第一重定义组件传值的方式
					//第二种
					/*
					props:{
						fmsg:String
					}
					*/
					//第三种
					/*
					props:{
						fmsg:{
							type:String,
							//设置默认值，没传值就使用他
							default:'默认值'
						}
					}
					*/
				}
			}
		}
	]
})