这篇文章主要介绍“Vue3中怎么使用SFC和TSX调用子组件的函数”,在日常操作中,相信很多人在Vue3中怎么使用SFC和TSX调用子组件的函数问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中怎么使用SFC和TSX调用子组件的函数”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
在使用 .vue 定义的组件中,setup 中提供了 defineExpose() 方法,该方法可以将组件内部的方法暴露给父组件。
创建子组件 demo-component-sfc.vue:
<template> <el-button type="primary" @click="demoFun('child')">demo component sfc</el-button> </template> <script lang="ts" setup name="demo-component-sfc"> const demoFun = (str: string) => { console.log('demo component sfc', str) } // 使用 defineExpose 暴露组件内部的方法 defineExpose({ demoFun }) </script>
使用 .tsx 方式定义的组件,也是通过参数 context 中的 expose() 方法暴露组件内容的方法。
创建子组件 demo-component-tsx.tsx:
import { defineComponent } from 'vue' export default defineComponent({ name: 'demo-component-tsx', setup (props, context) { const demoFun = (str: string) => { console.log('demo component tsx', str) } // 使用 expose 暴露组件内部的方法 context.expose({ demoFun }) return () => ( <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button> ) } })
在 .vue 文件中获取组件引用首先定义一个 ref 变量,然后为子组件设置 ref 属性。ref 属性值与变量名要保持一致。
import { defineComponent } from 'vue' export default defineComponent({ name: 'demo-component-tsx', setup (props, context) { const demoFun = (str: string) => { console.log('demo component tsx', str) } // 使用 expose 暴露组件内部的方法 context.expose({ demoFun }) return () => ( <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button> ) } })
如上面的代码所示:第一个子组件的 ref 属性值为 sfcRef,定义的变量名也是 sfcRef。在父组件中便可以使用 sfcRef 调用子组件的 demoFun 方法了。
在 .tsx 中获取组件的引用更简单,首先定义一个 ref 变量,然后将该变量设置给子组件的 ref 属性即可。
import { defineComponent, ref } from 'vue' import DemoComponentSfc from '@/components/ref/demo-component-sfc.vue' import DemoComponentTsx from '@/components/ref/demo-component-tsx' export default defineComponent({ name: 'demo-ref-tsx', setup () { const sfcRef = ref() const onBtnClick1 = () => { if (sfcRef.value) { sfcRef.value && sfcRef.value.demoFun('parent') } } const tsxRef = ref() const onBtnClick2 = () => { if (tsxRef.value) { tsxRef.value && tsxRef.value.demoFun('parent') } } return () => ( <> <div> <DemoComponentSfc ref={sfcRef} /> <el-button onClick={onBtnClick1}>parent button</el-button> </div> <div > <DemoComponentTsx ref={tsxRef} /> <el-button onClick={onBtnClick2}>parent button</el-button> </div> </> ) } })
两者实现效果一致:
到此,关于“Vue3中怎么使用SFC和TSX调用子组件的函数”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。