Vue3--ref 和 $refs 的使用

ref 介绍

• ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。
• $refs是一个对象，持有已注册过 ref的所有的子组件。

ref 有三种用法：

• ref 加在普通的元素上，用this.$refs.name获取到的是dom元素
• ref 加在子组件上，用this.$refs.name获取到的是组件实例，可以使用组件的所有方法
• 利用 v-for 和 ref 获取一组数组或者dom 节点

 ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用，或者在 this.$nextTick(()=>{})中调用。

子组件

<template>
  <div>
      <div>按钮</div>
  </div>
</template>

<script>
export default {

  data() {
    return {
        datalist:[1,2,3,4],
        name:"邹邹"
    };
  },
  methods: {
      save(){
          alert('save')
          console.log('save')
      },
      test(){
          alert('test')
      }
   
  },
};
</script>

父组件

<template>
    <div>
     
       <test ref='hello'/>   <!-- 给子组件绑定了一个 ref='hello' 的属性，就可以通过 this.$refs.hello 获取子组件里的数据了 -->
       <button @click="hangleclick()">提交</button>
    </div>
</template>

<script>
import Test from './test1'  
    export default {
      components:{ Test }, // 声明子组件
        data(){
            return{
                num: 1
            }
        },
        methods:{
          hangleclick(){
            console.log("datalist",this.$refs.hello.datalist)  // 调用子组件的 datalist 数据
            console.log("name",this.$refs.hello.name)  // 调用子组件的 name 数据
            this.$refs.hello.save()  // 调用子组件的 save 函数
            this.$refs.hello.test()  // 调用子组件的 test 函数

          }

        }
    }
</script>

点击页面上的按钮，查看控制台输出，可以看到在父组件里调用了子组件的数据和方法

setup 中使用 ref 和 $refs

上面中是在 options 中使用了 ref 和 $ refs ，但在 setup 中，是没有 this 的，那如何获取子组件的数据呢？可以在元素上绑定 ref 属性

子组件

<template>
  <div>
    <div>按钮</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"; // 导入

const name = ref("邹邹");
const datalist = reactive([1, 2, 3, 4]);

const save = () => {
  alert("save");
  console.log("save函数执行了");
};

const test = () => {
  alert("test函数执行了");
};

// 父组件使用的话需要导出
defineExpose({
  name,
  datalist,
  save,
  test
});
</script>

父组件

<template>
  <div>
    <child ref="childFormRef" />
    <!-- 给子组件绑定了一个 ref='childFormRef'  -->
    <button @click="handleclick()">提交</button>
  </div>
</template>

<script setup lang="ts">
import Child from "./child.vue";
import { ref } from "vue"; // 导入

const childFormRef: any = ref<InstanceType<typeof Child>>(); // 实例化

const num = ref(1);

const handleclick = () => {
  console.log("name", childFormRef.value.name);
  console.log("datalist:", childFormRef.value.datalist); // 调用子组件的 datalist 数据
  childFormRef.value.save(); // 调用子组件的 save 函数
  childFormRef.value.test(); // 调用子组件的 test 函数
};
</script>

这样就实现了在 setup 中使用 ref 和 $refs 了，效果和在 options 里的一样