How to pass values by Vue and React components
Most people do not understand the knowledge points of this article "Vue and React components how to transfer values", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Vue and React components how to achieve value transfer" article.
The way of passing values between components
There are no more than the following value-passing scenarios for components:
Between father and son
Between brothers
Between multiple levels (grandchildren, grandfathers or more)
Between any component
Between father and son
Vue
Vue is a framework based on individual data streams, but it provides some syntax and instructions to implement some operations.
Parent-> child: passing data to child components through props
Child-> parent: passes a value to the parent component through emit
At the same time, there are other ways to communicate between parent and child components by getting instances of the parent or child components of the component through $parent and $children, and then modifying the properties of the component through the instance object. In the form control, v-model is used to achieve two-way data binding, in fact, v-model is a syntax sugar, the internal implementation still listens to the change event of the form control, and then passes the data to the component to modify the data, thus realizing the two-way data binding.
React
Parent-> child: passing data to child components through props
Child-> parent: transfer functions to child components through the parent component, and then call these functions in the child components, using callback functions to transfer data
Between brothers
Vue
In Vue, you can find child component instances under the parent component, and then communicate with the components. For example, this.$parent.$children, in $children, you can find the component you want to communicate through the component's name, and then communicate.
React
In React, you need to pass the data to the parent component now, and then the parent component to the sibling component.
Multi-level component
Vue
In multi-level components, of course, you can find the ancestral components that need to be passed by constantly getting $parent, and then communicate, but this is tedious and error-prone and is not recommended. Vue added in 2.2.0 to provide a provide/inject way to transfer data. That is, the data is provided by the ancestor component, and the data is injected into the components that need to be used, so that the data can be used in the subcomponents. Provide/inject document
/ / parent component provides' foo'var Provider = {provide: {foo: 'bar'}, / /...} / / subcomponent injection' foo'var Child = {inject: ['foo'], created () {console.log (this.foo) / / = > "bar"} / /.}
React
In React, a similar way to handle multi-level component communication is provided with Vue-context, which provides a producer and a consumer that produces data in the parent component and consumes data in the child component. In terms of use, you only need to wrap the sub-components in the producer's Provider, and in the sub-components that need to use the data, you can get the producer's data through the Consumer package. Context document
/ / Theme context, default to light themeconst ThemeContext = React.createContext ('light'); class App extends React.Component {render () {const {signedInUser, theme} = this.props; / / App component that provides initial context values return ();}} function Layout () {return ();} / A component may consume multiple contextsfunction Content () {return ({theme = > ()});}
Between any component
Vue
For any component, you can simply use EventBus, and for more complex ones, it is recommended to use Vuex.
React
Simple use of EventBus, complex use of Redux
The above is about the content of this article on "how to realize the value transfer of Vue and React components". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.
