vue引用方法ref和一个计算器效果

最新推荐文章于 2023-03-21 00:20:12 发布

荒糖落

最新推荐文章于 2023-03-21 00:20:12 发布

阅读量126

点赞数

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

本文链接：https://blog.csdn.net/weixin_44561961/article/details/117562584

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中ref属性的使用，特别是在与DOM交互时的作用，以及table元素的特性和is属性的应用。通过示例展示了如何在table中使用is属性来指定组件。同时，详细讲解了父子组件间的通信，包括事件监听和数据传递，通过counter组件展示了$emit和$refs的使用。此外，强调了data在子组件中必须为函数以及在不同情况下的ref获取方式。

摘要由CSDN通过智能技术生成

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、ref和table的特性is的用法

ref可以引用dom，由于table的特性，is用法用来代指组件
示例：在这里插入图片描述

二、使用步骤

1.引入库

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<div>
				<table>
					<tbody>
						<!--由于table的特性，is用法指实际用是row这个组件而不是tr-->
						<tr is="row"></tr>
						<tr is="row"></tr>
						<tr is="row"></tr>
					</tbody>
				</table>
				<!--<table>
					<ul>
						<li is="row"></li>
						<li is="row"></li>
						<li is="row"></li>
					</ul>
				</table>-->
				<!--<table>
					<select>
						<option is="row"></option>
					</select>
				</table>-->
			</div>
		</div>
		
		<div id="root">
			<div ref="hello" 
				@click="handleClick"
			>
				hello world
			</div>
		</div>
		
		<!--当在div使用ref命名时，$refs.命名获取到的是dom节点，当在组件例如counter使用时，则是获取到子组件的引用-->
		
		<div id="foot">
			<counter ref="one"
				@change="handleChange"
				></counter>
                                    <!--父组件监听change事件handleChange-->
			<counter ref="two"
				@change="handleChange"
				></counter> 
			<div>{{total}}</div>
		</div>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			Vue.component('row',{
				data: function(){//子组件定义data时，data必须是一个函数不能是对象
					return{
						content:"this is row"
					}
				},
				template:'<tr><td>{{content}}</td></tr>'//模板
				
			})
			var vm = new Vue({
				el:"#app",
			})
			
			var cm = new Vue({
				el:"#root",
				methods:{
					handleClick:function(){
						alert(this.$refs.hello.innerHTML)//指的是整个vue实例里面所有的引用里面一个叫做hello的dom节点
					}
				}
			})
			
			Vue.component('counter',{//创建子组件，计数器，data必须用函数
				template:"<div @click='handleClick'>{{number}}</div>",
				data:function(){
					return{
						number:0
					}
				},
				methods:{
					handleClick:function(){
						this.number++
						this.$emit('change')//子组件监听触发change事件
					}
				}
			})
			var dm = new Vue({
				el:"#foot",
				data:{
					total:0
				},
				methods:{
					handleChange:function(){
						this.total = this.$refs.one.number + this.$refs.two.number
						
					}
				}
			})
		</script>
	</body>
</html>

总结

提示：这里对文章进行总结：
1.当在div使用ref命名时， $r e f s . 命名获取到的是 d o m 节点，当在组件例如 c o u n t e r 使用时，则是获取到子组件的引用，$ refs使用获取dom的元素
2.table的特殊属性，由于必须加tbody，若直接用组件则是不被包裹在tbody内与tr为平行，所以用is来代指组件
3.计算器的效果，通过父子组件的传值实现，$emit方法
4.子组件定义data时，data必须是一个函数不能是对象