vue3 ref组件用法简单介绍这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情当你使用C

这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

当你使用Composition Api的时候，用reactive，ref来实现响应式和在模版html上也使用refs，为了保持一个引用在模版html和组件上ref是一个引用，我们可以声明一个普通的ref 在setup里倒出去使用，

其实就是vue2 的ref方法，获得当前模版的dom，或者组件，vue3的获取方式不同而已，上面说的理论，可以不管，我们先看一下vue2获取模版dom的方式 vue2

<template>
   <div ref="d1">dasdasd</div>
   <txt ref="text"></txt>
</template>
{
  mounted() {
     // 获取dom
     this.$ref.d1
     // 获取组件
     this.$ref.text
  }
}

vue2很简单获取，但是vue3获取就需要用到了Composition ref，就上该开始说的那样，也是需要声明一一个ref对象，看具体的用法

 <template>
   <div ref="d1">dasdasd</div>
</template>
<script>
  import { ref, 
 f} from 'vue'
 
 export default {
    setup() {
       // 声明一个ref dom
       let d1 = ref(null) // 声明的ref 必须和模版上ref的名字一致才行
       return{
         d1
       }
    }
 
 }

</script>

打印log

解释就是当你在setup里声明的ref和模版上的ref的值一直的时候，在render的时候会给制定一个值，就是当前的node或者组件，你这个对关系会在虚拟dom挂在(初始化)时或者打补丁的时候，会在初始化render之后设置这个值 refs 表现为template refs时，和其他refs没有任何区别 (日志截图表现出来了)

这个方法还是可以获取当前的组件，并且可以调用该组件内得方法(感觉和vue2还是差不多的) vue3 组件 father.vue

<template>
  <div>{{ name }}</div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let name = ref("章三");
    let changeName = () => {
      name.value = "李四";
    };
    return {
      name,
      changeName,
    };
  },
};
</script>

<template>
  <div>
    <father ref="father"></father>  
    <button @click="changeName">点击</button>
  </div>
</template>
<script>
    import father from "../components/father.vue";
export default {
  components: {
    father, // 注册组件
  },  
  setup() {
    let father = ref(null)
    let changeName = ()=>{
        father.value.changeName() // 直接调用组件内得方法就可以
    }
    return {
        father,
        changeName
    }
  
  })
   
</script>

上面就是子父组件之间的调用，功能上和vue2一样，就是写的方式不一样

新加了一个动态ref 就是v-for的时候可能会用到用法

        <li
         v-for="(item,index) in stus" 
         :key="index"
         :ref="el => { if(el) listref[index]=el }">{{item}}</li>
    </div>
    
<script>
     setup() {
            let stus = reactive(["dddd","gggg","nnnnn"])
            let listref = [];
            onMounted(()=>{
                console.log(listref)
            })
            
            return{
            stus,
            listref
            }
     }
</script>

我上面的代码是只是简写了,把核心表达的写出来大家看下log

打印的是dom节点数组

vue3 ref组件用法 简单介绍

vue3 ref组件用法简单介绍