vue.js组件之H5页面，DOM标签或者组件中，通过ref="自定义name名称"引用的细节点

要点简介：[ 见下文案例 ]
  1. 使用is=" "解决H5出现的标签解析bug 。
  2. 子组件中 使用data，data必须是 一个 函数！
  3. DOM标签中，引用ref定义的name：获得的是该DOM元素；
    如下文的： this.$refs.hello.innerHtml
  4. 组件中，引用ref：获得的是该DOM对象
    如下文的： this.$refs.name2.number

vue不建议我们在代码里面操作DOM，但是，在处理一些极其复杂的动画效果，不操作DOM，单单靠vue的数据绑定是无法完成实际需求的效果的。这就需要我们必须操作DOM。如何操作呢？

通过ref引用的形式，来操作DOM。

下面我们给一个需求：当点击div的时候，div里面的内容被打印出来。

步骤如下：

1.首先起一个引用的名字，比如hello：

ref='hello'

通过引用名称拿到该ref对应DOM里面的内容。
重要代码如下：

<body>
	<div id="app">
		<div 
			ref="hello"
			@click="handleClick"
		>
			hello , 通过ref命名引用 操作DOM元素 !
		</div>
	</div>
		
	<script>
		var app = new Vue({
		  el: '#app',
		  methods: {
		  	handleClick: function() {		  				alert(this.$refs.hello.innerHTML);
		  	}
		  }
		})
	</script>
</body>

注意：this.$refs指页面所有引用。

2.如果是引用组件呢？
我们先看一段代码：

<body>
	<div id="app">
		<counter></counter>
		<counter></counter>
	</div>
		
	<script>
		Vue.component('counter', {
			template: '<button @click="handleClick">{{number}}</button>',
			data: function() {
				return {
					number: 0
				}
			},
			methods: {
			  	handleClick: function() {		  					
			  		this.number ++;
			  	}
			}
		})
		var app = new Vue({
		  el: '#app',
		})
	</script>
</body>

下面我们再给一个需求：数字的求和运算。

全部代码如下：

<body>
	<div id="app">
		<counter ref="name2" @change="handleChange"></counter>
		<counter ref="name3" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>
		
	<script>
		//子组件
		Vue.component('counter', {
			template: '<button @click="handleClick">{{number}}</button>',
			data: function() {
				return {
					number: 0
				}
			},
			methods: {
			  	handleClick: function() {		  					
			  		this.number ++;
			  		this.$emit('change')//父组件中监听变化
			  	}
			}
		})
		
		//父组件
		var app = new Vue({
			el: '#app',
			data: {
				total: 0
			},
			methods: {
				handleChange: function() { 
					console.log(this.$refs.name2.number);
					console.log(this.$refs.name3.number);
					this.total = this.$refs.name2.number +　this.$refs.name3.number;
				}
			}
		})
	</script>
</body>
注意：

this.$refs.name2是个对象！
这里使用了父子通信$emit()，不懂没关系，可以翻典籍或查看对应的讲解博客。

以上就是关于 “ vue.js踩坑之ref引用细节点 ” 的全部内容。

# vue.js
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue