HTML使用vue的 event,Vue.js中ref 及 $event 事件对象

在使用vue.js框架过程中，我们经常会听到有人说数据驱动视图，一切操作皆为操作数据，这句话没什么大毛病，只是个人感觉说这句话的人是一根筋罢了，因为js很大一部分核心就是操作DOM。即使是在框架时代，我们也无法避免这个问题。简单举个例子，如果在你渲染一个列表li，想在用户点击这个li时候增加一个一个背景颜色，那你是否需要拿到后端的数据，然后一顿循环在每个item的属性上添加一个变量开关，然后在页面去绑定这个开关，接着在点击后开始改变当前序列号index下的数据中对应的那个开关，这时候你还会遇到如果是对象属性操作，数据改变视图不更新问题，于是你还要手动更新视图。。。怎么一看，真心麻烦，vue本身就给我们提供了一系列的DOM操作方式

ref

在标签上添加 ref = “name” ，表示获取当前元素节点

获取

this.$refs.info.value

注意，该方式异常强大，通过该方法可以直接在父组件中操作子组件内部的data，从而进行父子组件单向通信。比如在实际项目的element ui弹窗组件中，如果在外部想展示该弹窗就需要弹窗组件中的:visible.sync="dialogVisible"，这时候我们可以直接通过ref方式修改，超级简便

// 父组件

// 事件methods处理

this.$refs.dialog.show = false

// 子组件

获取事件对象 ， 方法参数传递 $event

事件对象

获取

Event(e){

console.log(e)

}

打印结果：

也可以获取执行事件的节点

e.srcElement

e.srcElement.parentNode //甚至还可以取它的父元素

//设置属性 .setAttribute("属性","值")

//获取属性 .getAttribute("属性")

比如，我想给 button 按钮 添加背景颜色

e.srcElement.style.backgroundColor = "red"

也可以通过事件对象获取自定义属性，比如，button 按钮上自定义一个属性：

通过事件对象获取自定义属性

getInfo(e){

console.log(e);

console.log(e.srcElement.dataset.aid)

}

结果：

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

分享到：

打赏

谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏