做网站图片为什么不清晰,12306网站建设,怎样开发app软件,网站备案期间可以用二级域名访问网站吗vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景 目录 vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景一、问题背景二、解决方法三、示例 一、问题背景
代码环境#xff1a;vue3 #xff0…vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景 目录 vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景一、问题背景二、解决方法三、示例 一、问题背景
代码环境vue3 组合式API setup vite
碰到的问题代码为父组件中的一个按钮触发一个填写表单的Dialog弹出框在填写信息发送请求添加一条信息后再次点击触发按钮发现封装Dialog的子组件中表单中的值没有没有重置。
解决思路在点击父组件中的触发按钮时触发子组件中的重置方法对表单项进行重置。
二、解决方法
在 Vue 3 的组合式 API 中您可以使用 ref 和 value 来获取子组件实例并调用子组件中的方法。
官网详解
网址组件上的ref
三、示例
在父组件中您需要为子组件添加一个 ref
templatedivchild-component refchild/child-componentbutton clicktriggerChildMethod触发子组件方法/button/div
/templatescript
import { ref } from vue;
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},setup() {const childRef ref(null);const triggerChildMethod () {childRef.value.methodName(/* 参数 */);};return {childRef,triggerChildMethod};}
}
/script
在子组件中您需要在 setup 函数中定义一个需要调用的方法
templatediv!-- 子组件内容 --/div
/templatescript setup
import { ref } from vue;const methodName () {// 方法的代码
};// 用了script setup的不要忘记写这个
defineExpose({methodName
});
/script
注使用了 script setup 的组件是默认私有的一个父组件无法访问到一个使用了 script setup 的子组件中的任何东西除非子组件在其中通过 defineExpose 宏显式暴露。如果没有暴露的话则会报错childRef.value.methodName is not definded。
该注释的官网详解地址组件上的ref该网页滑到最后可看到下图内容
