vue3之$parent与$root的使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>$parent的使用</title></head><body><div id="app"><p @cl

默默努力的小老弟

8178人浏览 · 2021-11-28 18:21:44

默默努力的小老弟 · 2021-11-28 18:21:44 发布

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$parent的使用</title>
</head>
<body>
	<div id="app">
			<!-- 可用于父拿子组件的数据 -->
		    <p @click="clickComponent">xxx</p>
			<lk></lk>

	</div>




</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
	const Box={
		data(){
			return {
				msg:'xxx'
			}
		},
		methods:{
			btnClick(){
				console.log(this.$root.abc);//输出 父组件
				console.log(this.$parent.abc);//输出 父组件
				//虽然输出是一样的但是 parent只能是上一级的数据(可以是app也可以是其他组件)
				// 而root不限制(拿到app的数据)
			}
		},
		template:'<div @click="btnClick">子组件</div>'
	}

	const app=Vue.createApp({
       data(){
       		return {
				abc:"父组件"
			}
       },
       components:{
       	'lk':Box,
       },
       methods:{
       	 clickComponent(){
       	 	
       	 }
       }

	}).mount("#app");


</script>
</html>