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: 995 · Posted: 2022-12-23

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh