Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.