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

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>