vue ref 引用(vue获取DOM元素）

最新推荐文章于 2023-03-07 19:40:03 发布

是小张呀！

最新推荐文章于 2023-03-07 19:40:03 发布

阅读量320

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52099965/article/details/128200429

版权

1. 什么是 ref 引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。
默认情况下，组件的 $refs 指向一个空对象。

代码示例：

<template>
  <div>
    <h1 ref="StyleColor">999</h1>
    <my-footer ref="setPush" :list="list"/>
    
    <button @click="setRef">获取$refs引用按钮</button>
    <button @click="setPushAdd">获取子组件setPush引用</button>
  </div>
</template>

<script>
import myFooter from '../components/my-footer.vue'
export default {
  data() {
    return {
      list: [1,2,3,4]
    };
  },
  components: {myFooter},
  methods: {
    setRef() {
      /* 通过 this.$refs. 引用的名称可以获取DOM元素的引用 */
      console.log(this.$refs.StyleColor);
      /* 操作DOM元素， 把文本颜色改为红色 */
      this.$refs.StyleColor.style.color = "red";
    },
    setPushAdd() {
      /* 引用到组件的实例之后，就可以调用组件上的methods方法 */
      this.$refs.setPush.add()
    }
  },
};
</script>

子组件

<template>
    <div>
        my-footer组件
        <ul v-for="(item, index) in list" :key="index">
            <li>{{item}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['list'],
    data() {
        return {
            
        }
    },
    methods: {
        add() {
            this.list.push(5,6,7)
        }
    }
}
</script>