Article directory
Preface
Vue2’s parent-child component communication uses props and $emit. For details, you can read the previously published blog: Vue2 component communication
and Vue3 uses defineProps , defineEmits.
defineProps receives the same value as the props option and defineEmits receives the same value as the emits option.
For specific details, please refer to the official website: Vue3 defineProps and defineEmits
注意：defineProps与defineEmits不用导入，可以直接使用
If TypeScript is used, use pure type declarations to declare props and emit are also possible. The official tutorial is as follows:Props and emit declarations for types
注意：defineProps 或 defineEmits 要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错！
1. DefineProps passed from father to son
Scenario: The parent component passes the value to the child component, and the child component uses definePropes to receive and display it. If the parent component does not pass a value, the child component will display the default value it sets.
1. Use runtime declarations
The parent component passes the value, and the child component uses defineProps to receive the value, and can set the attribute of the value. type is the setting type, and default sets the default value. The code is shown below:
The effect is as follows:
If the parent component does not pass a value, the child component will display the default value it sets. The code is shown below:
The effect is as follows:
2. Use type-specific declarations
Select defineProps, hold down ctrl and click defineProps, you can see the content of defineProps in the source code, and you can see that JavaScript and TypeScript are written in different ways.
When the parent component passes a value, the code is as shown below:
The effect is as follows:
The parent component does not pass a value, the child The component does not define a default value.
Two optional attributes are defined in the interface Props, so the parent component will not report an error if it does not pass a value. If it is not defined as an optional attribute, then the parent component will miss the attribute and an error will be reported!
The code is as shown below:
Then the content will not be displayed.
官网：针对类型的 defineProps 声明的不足之处在于，它没有可以给 props 提供默认值的方式。为了解决这个问题，我们还提供了 withDefaults 编译器宏。代码会被编译为等价的运行时 props 的 default 选项。此外，withDefaults 辅助函数提供了对默认值的类型检查，并确保返回的 props 的类型删除了已声明默认值的属性的可选标志。
When the parent component does not pass a value and the child component defines a default value, the code is as shown below:
The effect is as follows:
This is achieved It has the function of being passed down from father to son.
2. DefineEmits
Select defineEmits, hold down ctrl and click defineEmits, you can see the content of defineEmits in the source code, and you can see that JavaScript and TypeScript are written in different ways.
If using TypeScript, it is also possible to declare prop and emit using pure type declarations.
Scenario: A num is defined in the parent component, with an initial value of 1. Defines a method to increase the num value. The child component emits a custom event, and the parent component receives the custom event and binds it to the corresponding method to listen to the child component's custom event; after listening to the event, it goes to the parent component's method to increment num.
1. Use runtime declarations
You can see that when you click the button of the child component, the num value in the parent component will increase.
2. Use type-specific declarations
We use the ts writing method. In the ts writing method, emit must be declared first and then called.
You can see that when you click the button in the child component, the num value in the parent component will increase.
This realizes the function of passing from son to father.
Summarize
The above is what I want to share about the communication between Vue3 parent and child components.