17.Vue获取Dom或子组件：ref

最新推荐文章于 2024-03-02 10:03:50 发布

高新园养鸡场

最新推荐文章于 2024-03-02 10:03:50 发布

阅读量333

点赞数

分类专栏： Vue 2.0 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/zyc3545/article/details/108440732

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

简介

ref作用：
可用于引用DOM对象。
可用于引用Vue组件（访问子组件data，调用子组件方法）。

演示

引用DOM对象

	<body>
		<div id="content">
			<h1 ref="content1">11111111111111</h1>
			<div ref="content2">{{msg}}</div>
			<button @click="dayin()">打印看看vue的ref中有啥</button>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#content',	
			data:{	
				msg:'需要显示的内容'	
			},
			methods:{
				dayin(){
					console.log(this);
				}
			}
		});
	</script>

点击按钮，查看log，可以看到vm.$refs里面拥有使用了ref的标签：
在这里插入图片描述

访问子组件data

	<body>
		<div id="content">
			<mycom ref="myCom"></mycom>
			<button @click="dayin">打印看看refs里的子组件</button>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#content',
			data: {
				msg: '需要显示的内容'
			},
			methods: {
				dayin() {
					console.log(this.$refs);
				}
			},
			components: {
				mycom: {
					template:"<h1>son</h1>",
					data(){
						return{
							sonMsg:"sonMsg"
						}
					}
				}
			}
		});
	</script>

运行，点击按钮，可以用vm.$refs.myCom取到子组件，自然就可以 .sonMsg 取到其data ：
在这里插入图片描述

调用子组件方法

	<body>
		<div id="content">
			<mycom ref="myCom"></mycom>
			<button @click="dayin">调用子组件方法</button>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#content',
			methods: {
				dayin() {
					this.$refs.myCom.dayinSon();
				}
			},
			components: {
				mycom: {
					template:"<h1>son</h1>",
					methods:{
						dayinSon(){
							console.log("打印Son");
						}
					}
				}
			}
		});
	</script>

运行，点击按钮，可以用vm.$refs.myCom取到子组件，自然就可以 .dayinSon() 调用方法：
在这里插入图片描述

高新园养鸡场

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17.Vue获取Dom或子组件：ref

简介ref作用：可用于引用DOM对象。可用于引用Vue组件（访问子组件data，调用子组件方法）。演示引用DOM对象 <body> <div id="content"> <h1 ref="content1">11111111111111</h1> <div ref="content2">{{msg}}</div> <button @click="dayin()">打印看看vue的ref中有啥
复制链接

扫一扫