Vue $refs操作 DOM实现组件传值
5星 · 超过95%的资源 185 浏览量
2021-01-20
14:05:34
上传
评论
收藏 65KB PDF 举报 
Vue $refs操作操作 DOM实现组件传值实现组件传值
怎么使用怎么使用ref
在使用框架的过程中有些时候我们不得不去操作dom节点，那么怎么操作呢？document…直接获取么？
这样不好！vue不推荐我们操作dom，那么怎么获取元素呢？
ref属性，则起到了它的作用–
我们首先来引用官网的关于ref属性的介绍
什么意思、通俗的讲就是给html标签添加一个ref属性指向一个名称，然后在vue实例当中使用 this.$refs去调用（this.$refs是
一个对象）
.deng {
width: 100px;
height: 100px;
border: 1px solid black;
}
.yellow {
background-color: yellow;
}
.gray {
background-color: gray;
}
Vue.component(“but”, {
methods: {
kai() {
let father = app.$refs;
father.ba.color = “yellow”;
},
guan() {
let father = app.$refs;
father.ba.color = “gray”;
},
},
template: `
开
关
评论10