首页 > 其他分享> 文章详细

第七十六篇：ref引用(在vue中引用Dom的方法)

2022-05-02 18:34:48 阅读：107 来源： 互联网

标签：vue DOM App 十六篇引用组件 ref refs

好家伙，

引子:

jQuery简化了程序员操作DOM的过程

vue 优势：MVVM 在vue中，程序员不需要操作DOM。程序员只需要把数据维护好即可！（数据驱动视图）

那么若要在vue中操作dom,这时就要用到"ref"了,

1.什么是ref引用，

ref用来辅助开发者在不依赖与jQuery的情况下，获取DOM元素或组件的引用

每个vue中的组件实例上，都包含一个$refs对象，里面存储着对应额DOM元素或组件的引用.

默认情况下,组件的$refs指向一个空对象.

好了,现在我又要开始给自己提需求了

假设：在vue中，需要操作DOM了，需要拿到页面上某个DOM元素的引用，此时怎么办？

用户需求:点击按钮,文本字体改色,

dom.style.color=''red"

现在问题来了:

如何拿到dom

先来试着看:

这里this指向vue实例,我们直接打印this来看看会出现什么:

App.vue组件代码如下:

<template>
  <div id="app">
    <h1>App根组件
    </h1>

    <button @click="showthis">点我展示this</button>
    
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  methods:{
    showthis(){
      //当前App组件的实例对象
      console.log(this);
    }
  },
  components: {
    HelloWorld
  }
}
</script>

我们来看看控制台:

可以看见$refs指向一个空对象

接下来我们来为h1绑定一个ref元素:

<h1 ref="h1style">App根组件
</h1>

再次来到控制台:

可以看到h1style的值指向了h1

接下来,我们只要$refs.h1style就可以拿到<h1>的dom了(妙啊)

现在我们继续在代码中添加:

showthis(){
      //当前App组件的实例对象
      console.log(this);
      this.$refs.h1style.style.color='red';
}

来看看效果:

点击按钮成功变红,

成功解决了用户需求,(用户竟是我自己)

标签：vue,DOM,App,十六篇,引用,组件,ref,refs
来源： https://www.cnblogs.com/FatTiger4399/p/16213924.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9