Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve Vue3 parent-son component intermodulation. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Parent component invokes child component method

The following demonstrates the use of setup syntax sugar, it is worth noting that the child component needs to use the defineExpose external exposure method before the parent component can be called!

1. Subcomponent / / first step: define the method in the subcomponent const doSth = (str: string) = > {console.log ("the doSth method of the subcomponent is executed!" + str);} / / second step: expose method defineExpose ({doSth}) 2, parent component trigger subcomponent method / 1, import import {ref} from 'vue';import HelloWorld from'. / components/HelloWorld.vue';// II, data / / step 2: define the variable const childRef = ref () with the same name as ref / / 3. Function const getChild = () = > {/ / step 3: call the method or variable of the subcomponent through value childRef.value.doSth ("pass value at will!") ;} 3. Test results

4. Official documents about defineExpose

DefineExpose

The component used is turned off by default, that is, a public instance of the component obtained through the template ref or the $parent chain, without exposing any bindings declared in.

To identify the properties to be exposed in the component, use the defineExpose compiler macro:

Import {ref} from 'vue'const a = 1const b = ref (2) defineExpose ({a, b})

When the parent component obtains the instance of the current component through the template ref, the obtained instance will be like {a: number, b: number} (ref will be automatically unpackaged as in a normal instance).

Second, the child component calls the parent component method 1, the child component import {onMounted} from "@ vue/runtime-core"; const emit = defineEmits (["doSth"]); const doSth = () = > {emit ('doSth');} onMounted () = > {doSth ();}); 2. Parent component / / one, import import HelloWorld from'. / components/HelloWorld.vue' / / II. Function / / step 2: custom method const sayHello = () = > {console.log ("hello world!");} 3. Test result

4. Official documents about defineEmits

DefineProps and defineEmits

You must use defineProps and defineEmits API to declare props and emits in, which have complete type inference and are directly available in:

Const props = defineProps ({foo: String}) const emit = defineEmits (['change',' delete']) / / setup code

Both defineProps and defineEmits are compiler macros that can only be used in. They do not need to be imported and will be compiled along with the process.

DefineProps receives the same value as the props option, and defineEmits receives the same value as the emits option.

DefineProps and defineEmits provide appropriate type inference when options are introduced.

The options passed into defineProps and defineEmits are promoted from setup to the scope of the module. Therefore, the options passed in cannot refer to local variables declared in the setup scope. Doing so will cause compilation errors. However, it can reference imported bindings because they are also within the scope of the module.

If Typescript is used, it is also possible to declare prop and emits using pure type declarations.

These are all the contents of the article "how to realize the Intermodulation of Vue3 parent and Child components". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.