在组件中每个dom元素都可以添加ref属性，即使是封装好的组件拿来用都可以为其添加ref属性，但是ref属性值在当前组件中不能被重复。如果重复了，会将最后一个相同ref属性值获取，也只操作最后一个，通过this.$refs.ref属性值操作dom。

当前组件实现dom操作

<template>
      <div id="app">
          <p ref="bianse">app根元素</p>
          <button @click="bian">点击变色</button>
      </div>
</template>

<script>
export default {
    methods: { 
       bian(){
           //$refs指向的ref的元素属性值，$refs是一个对象，可以包含多个对象，属性是ref的值，对应的是ref值对应的dom元素。
           this.$refs.bianse.style.color="red"
       }
    },
}
</script>

使用ref操作子组件的dom或者数据

子元素son组件

<template>
      <div id="app">
          <p>{{message}}</p>
          <button @click="add">点击+1</button>
      </div>
</template>

<script>
export default {
    data() {
        return {
            message:0
        }
    },
    methods: { 
       add(){
           this.message+=1
       }
    }
}
</script>

父组件APP引用子组件dom。

<template>
      <div id="app">
          <button @click="bian">点击son组件数据切换</button>
          <Son ref="son"></Son>
      </div>
</template>

<script>
export default {
    data() {
        return {
            message:0
        }
    },
    methods: { 
        bian(){
            //直接操作子组件事件函数使message+1
            //this.$refs.son.add()
            //直接操作子组件属性使message+1
            this.$refs.son.message+=1
        }
    }
}
</script>