Vue中使用ref属性来获取DOM和组件

使用Vue自带的属性refs来获取DOM元素语法<body><div id="app"><h1 ref="myf01">hello world</h1><button type="button" @click="getElement">点击&

穷少年

4169人浏览 · 2020-09-18 20:02:26

穷少年 · 2020-09-18 20:02:26 发布

使用Vue自带的属性refs来获取DOM元素

语法

<body>
		<div id="app">
			<!-- 在想要获取的DOM对象上添加ref方法，ref里面写别名方便之后获取 -->
			<h1 ref="myf01">hello world</h1>
			<button type="button" @click="getElement">点击</button>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{
					getElement:function(){
						// 在Vue实例内部使用this.$refs.别名 的方式获取
						console.log(this.$refs.myf01.innerText)
					}
				}
			})
		</script>
	</body>

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

使用$refs获取组件的方法和数据

用法

<body>
		<div id="app">
			<!--在组件上使用ref属性-->
			<my-component-01 ref="component01"></my-component-01>
			<button type="button" @click="getElement">点击调用子组件的方法</button>
		</div>
		
		<template id="temp01">
			<h1>{{msg}}</h1>
		</template>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{
					getElement:function(){
						// 获取子组件的data
						console.log(this.$refs.component01.msg)
						
						// 调用子组件的方法
						this.$refs.component01.func()
					}
				},
				components:{
					'my-component-01':{
						template:'#temp01',
						data:function(){
							return {
								msg:'我是子组件'
							}
						},
						methods:{
							func:function(){
								alert('我是组件上的方法')
							}
						}
					}
				}
			})
		</script>
	</body>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^