In development, you will encounter such a requirement: obtain the reference of the subcomponent and call the method defined in the subcomponent. If a form component is encapsulated, you need to call the reference of this form component in the parent component, and call the verification form function or reset form function of this form component. To implement this function, first expose the functions that the parent component needs to call in the child component, then go to the parent component to obtain the reference of the child component, and finally call the method exposed by the child component through the reference of the child component.
In components defined using .vue, the defineExpose() method is provided in setup. Methods can expose methods inside a component to parent components.
Create sub-component demo-component-sfc.vue:
demo component sfc
Components defined using .tsx method are also passed through the parameter context The expose() method in exposes the content of the component.
Create sub-component 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 () => ( demoFun('child')}>demo component tsx ) } })
To obtain the component reference in the .vue file, first define a ref variable, and then set the ref attribute for the sub-component. The ref attribute value must be consistent with the variable name.
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 () => ( demoFun('child')}>demo component tsx ) } })
As shown in the above code: the ref attribute value of the first subcomponent is sfcRef, and the defined variable name is also sfcRef. In the parent component, you can use sfcRef to call the demoFun method of the child component.
It is easier to obtain the reference of the component in .tsx. First define a ref variable, and then set the variable to the ref attribute of the subcomponent.
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 () => ( <> parent button parent button ) } })
The two achieve the same effect:
The above is the detailed content of How to use Vue3 SFC and TSX to call functions in subcomponents. For more information, please follow other related articles on the PHP Chinese website!