vue.js学习笔记十四 —— 使用ref获取DOM元素和组件引用

最新推荐文章于 2024-06-06 08:05:12 发布

武汉小喽啰

最新推荐文章于 2024-06-06 08:05:12 发布

阅读量776

点赞数 1

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/94399749

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. 产生背景

在vue中，其实是不推荐使用js操作DOM对象的，但是在开发中，我们又不可避免的会需要操作DOM去进行某些操作，比方说：我们需要获取到某个标签中的文本内容，如果不操作DOM，我们怎么获取到值。传统的做法是document.getElementById("mh3").innerText，这明显与vue的理念是相冲突的，这时候，vue给我们提供了解决方案。

2. $refs获取标签的引用

通过观察vm对象，我们知道其有一个refs，刚开始是空的对象，通过给标签tab添加ref属性，例如：ref="a"，在观察refs，发现refs多了一个对象a，对象a的值就是标签tab的内容

例如：

<!-- 标签内容 -->
<div id="app">
	<input type="button" value="获取元素" @click="getElement" />
	<h3 id="mh3" ref="a">哈哈哈，今天天气太好了。。。</h3>
</div>


<!-- vm对象 -->
<script>
	// 创建Vue实例，得到viemodel
	var vm = new Vue({
		el:'#app' ,
		data:{
				
		},
		methods:{
		    getElement(){
			   //console.log(document.getElementById("mh3").innerText);
			   console.log(this.$refs.a.innerText);
		   }
	    }
    });
</script>

注意：ref的属性值是任意值。使用的时候，在vm对象中，直接用this.$refs.(ref的属性值).(其他)即可

3. $refs获取组件的引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.css"></link>
    <style>
    </style>
</head>
	<body>
		<div id="app">
			<input type="button" value="获取元素" @click="getElement" />
			<h3 id="mh3" ref="a">哈哈哈，今天天气太好了。。。</h3>
			<login ref="login"></login>
		</div>
	</body>
	<script>
			// 定义组件模板
			var login = {
				template:'<h1>我的组件</h1>',
				data(){
					return {
						msg:'子组件的msg'
					}
				},
				methods:{
					show(){
						console.log("子组件的show方法");
					}
				}
			};
			// 创建Vue实例，得到viemodel
			var vm = new Vue({
				el:'#app' ,
				data:{
				
				},
				methods:{
					getElement(){
						//console.log(document.getElementById("mh3").innerText);
						// console.log(this.$refs.a.innerText);
						// 访问子组件的数据
						console.log(this.$refs.login.msg);
						// 访问子组件的方法
						this.$refs.login.show();
					}
				},
				components:{
					login
				}
			});
		</script>
</html>

注意：从这个例子，我们知道，在组件中使用ref属性的好处就是，我们可以直接在父组件中获取到子组件的数据和访问到父组件的方法。

武汉小喽啰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习笔记十四 —— 使用ref获取DOM元素和组件引用

1. 产生背景在vue中，其实是不推荐使用js操作DOM对象的，但是在开发中，我们又不可避免的会需要操作DOM去进行某些操作，比方说：我们需要获取到某个标签中的文本内容，如果不操作DOM，我们怎么获取到值。传统的做法是document.getElementById("mh3").innerText，这明显与vue的理念是相冲突的，这时候，vue给我们提供了解决方案。2. $refs获取标签...
复制链接

扫一扫