10父子组件通信-props驼峰标识

72 阅读 0 评论 48 点赞

我是靠谱客的博主粗犷鞋垫，最近开发中收集的这篇文章主要介绍10父子组件通信-props驼峰标识，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这里有几种标识

注意：如果使用驼峰标识cInfo，则在id='app’里面进行改变 c-info，其他位置不用改变，
以-分割 cInfo --> c-info cMyMessage --> c-my-message

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn :cinfo='info'></cpn>
		</div>
		
		<template id="cpn">
			<h2>{{cinfo}}</h2>
		</template>
		
		
		
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			// Vue.component('cpn')
			
			const cpn={
				template:'#cpn',
				props:{
					cinfo:{
						type:Object,
						default(){
							return {}
						}
					}
				}
			}
			
			
			
			
			const app=new Vue({
				el:'#app',
				data:{
					info:{
						name:'1',
						age:2,
						height:3
					}
				},
				components:{
					cpn
				}
			})
		</script>
		
	</body>
</html>

c-info

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn :c-info='info'></cpn>
		</div>
		
		<template id="cpn">
			<h2>{{cInfo}}</h2>
		</template>
		
		
		
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			// Vue.component('cpn')
			
			const cpn={
				template:'#cpn',
				props:{
					cInfo:{
						type:Object,
						default(){
							return {}
						}
					}
				}
			}
			
			
			
			
			const app=new Vue({
				el:'#app',
				data:{
					info:{
						name:'1',
						age:2,
						height:3
					}
				},
				components:{
					cpn
				}
			})
		</script>
		
	</body>
</html>