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

最新推荐文章于 2024-01-30 13:18:12 发布

原创最新推荐文章于 2024-01-30 13:18:12 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

本文探讨了在Vue中，父子组件通过props进行通信时，如何处理驼峰命名和短横线命名的问题。重点指出，若使用驼峰命名如cInfo，在id为'app'的父组件内改变时，只需将DOM元素改为短横线形式c-info，子组件内仍保持原样。同时提到了以短横线命名如c-my-message的转换规则。

这里有几种标识

注意：如果使用驼峰标识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>