Should the display of the dialog box be turned off by the parent component or the child component?

A simple dialog box has a display / close status

I think the following situations can be done
1. The parent component controls the (props) when the child component informs the parent component to change the props when the btn is clicked.

2 the child component controls the child component to display / close the parent component through its own state. You need to call the child component to achieve the display and close of the child component

I am more inclined to method 2 because I think it is relatively simple (the state is controlled by sub-components have a systematic feeling), but some bosses say that method 1 is more data-driven and pure, which is better and more in line with the idea of componentization?

Front-end
Mar.03,2021

since it is data-driven, you should not allow the outside world to call internal methods entirely through data control. It feels that the first one is more in line with the idea of componentization

A good component should be controlled by props as far as possible, and use less or not state

if you do not need to tell the parent component what to do, just close the direct child component. If you need to trigger the event @ output () event, use the pop-up box to capture

I don't think the dialog box should be a subcomponent of a component. The
dialog box is supposed to be a generic component. I prefer to put it on the root node and use things like vuex to pass the display and control the switch on and off.
of course, if you don't use a state management tool like vuex, you can control it with global events.

parent component props transfers data to control

Previous: How webpack3 eslint displays errors on browsers

Next: How to return null? when creating a class in javascript

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu