提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js：子组件访问父组件parent-root笔记

VueJS组件笔记 访问 root Parent
2023-09-27 14:22:47 时间

完整笔记代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>子组件访问父组件parent-root</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>我是cpn组件</h2>
				<ccpn></ccpn>
			</div>
		</template>
		<template id = "ccpn">
			<div>
				<h2>我是一个子组件</h2>
				<button @click = "btnClick">按钮</button>
			</div>
		</template>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue"
				},
				components: {
					cpn: {
						template: "#cpn",
						data() {
							return {
								name:'我是cpn的name'
							}
						},
						// methods: {
						// 	btnClick() {
						// 		console.log(this.$parent);
						// 	}
						// },
						components: {
							ccpn: {
								template:"#ccpn",
								methods: {
									btnClick() {
										// 访问父组件 $parent
										console.log(this.$parent);
										console.log(this.$parent.name);
										// 访问根组件 $root
										console.log(this.$root);
										// 直接访问的是Vue实例
										console.log(this.$root.message)
									}
								}
							}
						}
					}
				}
			});
		</script>
	</body>
</html>

理解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章