Communication problems in parent and child components of uniapp

1、DOM in Property and Attribute The difference between

property yes DOM Properties in , yes JavaScript The object in ;
attribute yes HTML Features on labels , Its value can only be a string ;

https://www.cnblogs.com/elcarim5efil/p/4698980.html

https://www.jb51.net/article/50686.htm

https://blog.csdn.net/losedguest/article/details/112462253

2、uniapp Parent component in 、 Child components

components The components in are sub components ,pages The component in is the parent component . It can also be understood as components The components in are templates 、 object ; and pages The components in are instances .

A、

The parent component passes through the of the child component props Transfer data to subcomponents ;

In the component template sync Modifier can play a role “ Two way binding ” The effect of ;（ Case study ：https://m.yisu.com/zixun/178738.html,https://blog.csdn.net/badmoonc/article/details/82876294?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242）

Parent component passed ref Property to get the data of the sub component directly （data）;

Can pass uni.$emit() The second parameter of the passes a value to the parent component , for example $emit('enlarge-text', 0.1).

B、 Subcomponent pass uni.$emit() Triggering event , Passing events to the parent component ; Parent component passed uni.$on()  Listen for sub component events .

C、 The purpose of the slot is to change the template of the child component through the parent component template , Subcomponent pass <slot></slot> Tag to define where the parent component is inserted

https://ask.dcloud.net.cn/article/36010

3、 stay Vue in , The relationship between parent and child components can be summarized as props down, events up. Parent component passed props Pass data down to subcomponents , Subcomponent pass events Send message to parent component .

Subcomponents can be built-in by calling $emit Method and pass in the event name to trigger an event , Parent component passed v-on To listen for sub component events

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

 

4、uni-app Package of components —— Transmission of events between parent and child components

（1） If the event code of the component is consistent after multiple calls , And the data passed by the parent component is not modified . Write events uniformly in the component .
（2） If the event code of the component is inconsistent after multiple calls , Or the data passed by the parent component needs to be modified . Use custom events ： $emit(“ Event name ”, Parameters );

https://blog.csdn.net/World_Mei/article/details/105847761