vue-子访问父-parent-root

Y–R

于 2021-06-30 23:30:27 发布

阅读量112

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45948000/article/details/118371783

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>父组件访问子组件，使用$children(用的比较少)或$refs（引用）；</p>
		<p>子组件访问父组件：使用$parent（父亲）；</p>
		<div id="app">
			<cpn></cpn>
		</div>
		
		<template id="cpn">
			<div>
				<h2>我是子组件</h2>
				<button @click="btnClick()">子组件按钮</button>
			</div>
		</template>
	</body>
</html>
<script src="../vue.js"></script>
<!-- <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> -->
<script>
const app = new Vue({
	el:'#app',
	data:{
		message:'你好',
	},
	components:{
		cpn:{
			template:'#cpn',
			methods:{
				//访问父组件
				btnClick(){
					//访问父组件的$parent,这里只能访问其上一级的组件
					console.log(this.$parent)
					//访问根组件$root
					console.log(this.$root)
				}
				
			}
		}
	},
	methods:{
	},
})
</script>

Y–R

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
vue-子访问父-parent-root

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>父组件访问子组件，使用$children(用的比较少)或$refs（引用）；</p> <p>子组件访问父组件：使用$parent（父亲）；</p> <div i.
复制链接

扫一扫