Vue中的DOM(ref,emit)

最新推荐文章于 2024-11-05 21:09:47 发布

原创最新推荐文章于 2024-11-05 21:09:47 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文通过两个实例详细介绍了Vue.js中$refs的使用方法。第一个实例展示了如何通过$refs获取DOM元素并响应其点击事件；第二个实例则演示了如何利用$refs访问组件的内部状态，实现组件间的数据交互。

<!DOCTYPE html>
<html>
<head>
	<title>change color</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id='app'>
		<div ref='hello' @click='handleClick'>hello world</div>
	</div>


	<script>
		var vm=new Vue({
			el:'#app',
			methods:{
				handleClick(){
					alert(this.$refs.hello.innerHTML)
				}
			}
		})
	</script>


</body>
</html>

this.$refs 获得所有的引用

<!DOCTYPE html>
<html>
<head>
	<title>change color</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id='app'>
		<counter @change='handleChange' ref='one'></counter>
		<counter @change='handleChange' ref='two'></counter>
		<div>{{total}}</div>
	</div>

	<script>
		Vue.component('counter',{
			template:"<div @click='handleClick'>{{number}}</div>",
			data(){
				return {
					number:0
				}
			},
			methods:{
				handleClick(){
					this.number++;
					this.$emit('change')
				}
			}
		})

		var vm=new Vue({
			el:'#app',
			methods:{
				handleChange(){
					this.total=this.$refs.one.number+this.$refs.two.number;
				}
			},
			data:{
				total:0
			}
		})
	</script>


</body>
</html>