vue 父访问子组件

最新推荐文章于 2022-05-12 15:09:47 发布

Ranx3

最新推荐文章于 2022-05-12 15:09:47 发布

阅读量145

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41472891/article/details/108651341

版权

前端专栏收录该内容

37 篇文章 3 订阅

订阅专栏

父组件访问子组件 $c h i l d r e n,$ ref

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn ref="f"></cpn>
			<cpn ref="r"></cpn>
			<button @click="btnclick">按钮</button>
		</div>
		<template id="temp">
			<div>
				哈哈
			</div>
		</template>
		<script>
			
			const app = new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					btnclick(){
//						console.log(this.$children);
//						this.$children[0].showmessage();
						console.log(this.$refs.r);
					}
				},
				components:{
					cpn:{
						template:'#temp',
						methods:{
								showmessage(){
									console.log("按住啦北鼻")
								}	
						}
					}
				}
			})
		</script>
	</body>
</html>