在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴露的方法。
1 子组件暴露方法
1.1 SFC（.vue）暴露方法
在使用.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>
1.2 TSX（.tsx）暴露方法
使用.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>
)
}
})
2 父组件调用子组件中的方法
2.1 SFC（.vue）调用
在.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方法了。
2.2 TSX（.tsx）调用
在.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 方式调用子组件中的函数的文章就介绍到这了,更多相关Vue调用子组件中的函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)