Questions encapsulated by vue components

the first way:

the parent component passes values to the child component, but the data passed cannot be manipulated within the child component
the parent component can only be notified through this.$emit ().

the second way:

use this.$refs.xxx. Method ();

this method of using the parent component to invoke the child component
this can manipulate data within the child component

but the second way is to say there is a problem on the Internet!

could you tell me which way is better?

Aug.09,2021
The data passed by

can be operated on the sub-component, received in the data of the sub-component, and then operated on data.


these are two ways for parent-child components to communicate. It is better to see usage scenarios ,

if there is no better one.
  • the first prop,emit communication between father and son is the recommended method encapsulated by vue
  • the second is that the parent calls directly through ref. In fact, everything of the child component can be operated through ref. This operation is obviously dangerous, so it is best to reserve the interface called by the parent component in the child component. For example, if the parent component invokes a data data of the child component, the child component writes a function that returns the data, parent component and calls the function directly. So remember not to take any action on the child component at any time in the parent component . If you need to write the action behavior in the child component, the parent component just calls
  • .
  • of course, the call to ref also has a big scenario. If you use it for a long time, you can gradually find out the rules. It is recommended to read this article https://codeshelper.com/a/11..

the first way is relatively good, the second method is to directly operate dom to achieve, which will affect performance, in fact, you mean two-way binding, you can add .sync in the component, sub-components through $emit ('update: specific variables'), you can achieve two-way effect!

Menu