Vue $refs 操作 DOM 元素
Vue About 638 words$refs
每个Vue
组件实例上都包含一个$refs
对象,对象中存储着对应的DOM
元素或组件的引用。
默认情况下,$refs
指向一个空对象。
ref
在元素中添加ref
属性,并指定属性值,就会向$refs
中注册(添加)这个元素。
ref
可以添加在普通标签元素,也可以添加在组件上。
<template>
<div>
<p ref="myP">文字</p>
<MyComponent ref="myComponent"></MyComponent>
<button @click="showThis">按钮</button>
</div>
</template>
操作元素
通过this.$refs.refName
操作元素。
export default {
methods: {
showThis() {
console.log(this)
console.log(this.$refs.myP)
console.log(this.$refs.myP.textContent)
this.$refs.myP.style.color = 'red';
this.$refs.myComponent.changeValue();
}
}
}
Views: 1,176 · Posted: 2022-12-23
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...