[vue3.x]ref的使用

普通的应用

DOM 元素将在初始渲染后分配给 ref

因为 ref 本身是作为渲染函数的结果而创建的，在初始渲染时你不能访问它们——它们还不存在！

表单的主动提交

场景描述，将form表单设为组件，在父组件中，通过点击按钮，弹框modal 显示表单,点击modal的时候提交表单，因此需要代码控制点击modal提交按钮的时候提交form表单

form组件
self-form.vue

<a-form ref="formRef">
</a-form>

setup(){
const formRef = ref();const checkForm = () => {formRef.value.validate().then((res) => {console.info("submit valid success");emit("mysub", form);//这与父组件的名称需要一致 mysub}).catch((error) => {if (undefined != error.errorFields && error.errorFields.length > 0) {console.error("validate faild......................", error);} else {console.error("catch excute.......", error);}});};
return {
formRef,
checkForm
}
}

父组件

<a-modal @ok="confirmMoal">
<self-form ref="submitForm" @mysub="addOrEdit"></self-form>
</a-modal>

setup(){
const submitForm = ref();const valid = () => {//check the form valid ruleif (null !=submitForm.value) {submitForm.value.checkForm();}};const addOrEdit=()=>{
//submit form
}
return {
submitForm,
confirmMoal,
valid
}
}

注意对应的名称

v-for循环中对ref的应用

<template v-for="(item,index) in photos" v-bind:key="index">
<router-link class="bamboo-photo":ref="handleBox":to="item.path"@mousemove="e=>move(e,index)"@mouseleave="e=>leave(index)"@mouseover="e=>over(index)"><div class="reflection" :ref="handleRefl"></div><div class="element bg"><!-- <div class="number">28</div> --><div class="symbol">{{item.name}}</div><!-- <div class="details">Nickel<br />58.6934</div> --></div></router-link>
</template>

setup(){const box=[];const refl=[];const handleBox=(el)=>{box.push(el);}const handleRefl=(el)=>{refl.push(el);}
//设置值
const over = (index) => {//位于指定元素上方refl[index].style.opacity = 1;};const leave = (index) => {//离开指定元素box[index].$el.style.transform = `perspective(500px) scale(1)`;refl[index].style.opacity = 0;};
}

[vue3.x]ref的使用相关推荐

Vue3的Ref提案到底发生肾摸事了
Vue3的Ref提案到底发生肾摸事了朋友们好,我是大圣,最近vue3的ref提案社区讨论的比较多,社区里我看了一下相关的rfc和知乎讨论,我发现很多年轻人不讲武德,今天也摸鱼写一点我的看法吧先说结 ...
【vue3】ref获取v-for循环渲染的元素
前言在vue2里我们可以给元素绑定ref属性,然后使用this.$refs.xxx 就可以获取到元素. 而在vue3版本中,你可以继续使用vue2的option Api的语法,也可以使用vue2的写 ...
Vue3 的 ref 和 reactive 问题
如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础 ...
vue3中ref的理解
1.什么是ref ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了r ...
Vue3 初探 ref、reactive 、及改变数组的值
概况 Vue3 里要实现数据的响应式监听一共有两种方式既:ref 和 reactive 他们既有区别又有联系. ref() ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型, ...
Vue2与Vue3中Ref绑定元素
Vue之Ref绑定元素获取实例我们可以通过给元素绑定ref属性来获取这个元素的实例,来调用实例中的某种方法来实现某种功能 Vue2实现 <template><!-- 单个绑定 -- ...
为什么 Vue3 的 ref 让很多大佬操碎了心？
作者:瑞哥来源:瑞哥聊前端最近 Vue3 关于 ref-sugar 的提案引起了广泛的讨论:juejin.im/post/689417-[1] <script setup> impor ...
vue3.0 ref 函数
先写一个基础的vue3模板 <template><div><p>个人信息</p><p>姓名:{{ name }}</p>< ...
vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别
ref ref toRef 普通ref对象特殊ref对象不会和原始对象挂钩创建的ref对象,与原始对象挂钩重新渲染不会触发渲染 -普通ref对象不会和原始对象挂钩重新渲染如下面的例子中 ...

[vue3.x]ref的使用

[vue3.x]ref的使用

普通的应用

表单的主动提交

v-for循环中对ref的应用

[vue3.x]ref的使用相关推荐

最新文章

热门文章