vue父组件传递给子组件数据

在使用组件的时候，经常会互相的传递数据，那么父组件如何传递数据给子组件，主要子组件利用props接收父组件传递的数据

这里有一个坑，就是在命名的时候不要出现驼峰，最好全部小写，如果出现驼峰命名获取结果是undefined，下面是演示代码，

先声明两个组件：

//子组件
var child={	
    template:'#child',		
    data:function(){
        return {
            childDta:'子组件数据'
        }
    },
    mounted(){
	console.log(this)
    },
    props:['parData'],		
}
//父组件
var parent={
	data:function(){
		return {
		    parentData:'父组件数据'
	        }
	},
	template:'#parent',
	components:{
		child
	}
}
//然后在实例的components中挂载一下
components:{
	parent
}

这里是template代码：

		<template id="parent">
			<div>
				<p>父组件</p>
				<!-- 父组件调用子组件 -->
				<!-- 1.通过v-bind方法，把父组件中的数据绑定到parentData中 -->
				<child :parData='parentData'></child>
			</div>			
		</template>
		<template id="child">
			<div>{{parData}}</div>
		</template>

子组件在父组件中使用必须在父组件中的components中注册一下，要不然不会显示内容的

以上案例通过:parData='parentData'把父组件的数据传递给了子组件但是子组件完全没有拿到，这里可以打印下实例看下

可以看到parData是undefined，你可以在$attr中看到父组件的数据

或者在this.$vnode.data.attrs中也可以

造成parData是undefined，是因为使用了驼峰命名，改成全部小写就可以正常获取数据