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 里的一样
