1. Parent-child component communication

VUE parent-child component communication

1.props / emit

Parent -> child: passes data to child components via props child -> parent: passes value to parent components via emit

2.children/parent

Parent/Children can access an instance of a component. What does the instance represent? Represents all methods and data that have access to this component

React communicates with the parent and child components

1.props / emit

Parent -> child: passes data to the child component using props. Child -> Parent: passes parameters by calling the function passed by the parent component

Summing up parent-child component communication

The parent method is the same as the parent method (props), but the parent method is the same as the parent method (props), but the parent method is the same as the parent method (props), and the parent method is the same as the React method (props)

Second, intergenerational component communication

Vue intergenerational component communication

1. Ordinary delivery
I come down

The parent component passes down the props to the child component using $attrs (any data that the child component does not receive is passed down), and finally the child component passes down the props

Tell ye

Emit () sends events up through this.emit () on sub-components using emit() on sub-components using listeners to receive events (any data not received by the sub-component will continue to be sent up). The component accepts parameters by calling a custom event

Sun chuan added

Now that we’ve done this, we can pass in a function and pass in the data by calling that function

2.provide/inject

Component instances are passed down by the parent component definition provide, and the method properties of the instance can be called by inject in all descendant components

React Intergenerational component communication

Context producer-consumer pattern

1. Invoke the React method createContext and return the value and expose it
import React from 'react'; Export const MyContext= react.createcontext () import {MyContext} context' const {Provider}=MyContext  <Provider value={{car1,car2,car3,changeCar1:this.changeCar1}}> <Child car1={car1} changeCar={this.changeCar}></Child> </Provider>Copy the code
2. Use it in child components
import {MyContext} from '.. /.. /context' defines a static method inside the component. Note that contextType cannot change to static contextType = MyContextCopy the code

You can then use the method passed by the parent by calling this.context inside the component without having to define a static method for the second method

< mycontext.consumer > {value => (value.smallcar)} // value is the value of the context.Copy the code

State centralized management

VueX

Vuex is a common data management tool for VUE. We can save shared data to Vuex

1. It is convenient for any component in the whole program to obtain and modify the data saved in VUEX

Using Vuex can be tedious and redundant if you don’t plan to develop large, single-page applications. That’s true — if your application is simple, you’d better not use Vuex. A simple Store pattern (opens New Window) is all you need. But if you need to build a medium to large single-page application, and you’re probably thinking about how best to manage state outside of components, Vuex would be the natural choice

2.VueX consists of the following parts
  • State, the data source that drives the application;Copy the code
  • Mutations is the only way to change the state in Vuex's storeCopy the code
  • Actions Responds to state changes caused by user input on the view.Copy the code
  • Getters derives some state from state in the storeCopy the code
  • Modules splits the store into modulesCopy the code
3. How to configure and define vuex
Import Vue from 'Vue' import Vuex from 'Vuex' vue. use(Vuex) export default new Vuex.Store({state: {status data}, mutations: {methods for changing data}, Actions :{complex modification methods}, getters:{data reprocessing output}, Modules :{multiple stores load unified},})Copy the code
4. How to use the state in VUEX

State and this.store. State and this.store. State and this.store mapState mapMutations

MapState ([key]) mapMutations([eventName]) method can be approved using this. codestore.com MIT (eventName,parms) actions method this.$store.dispatch(eventName,parms)Copy the code

redux

Redux is a state-specific js library for vue, React, angular redux. Redux is not a state-specific js library for React, angular Redux is a general library for React. Redux is a JS library specially used for state management. It is similar to Vuex. It is basically used with React

1. The story of use

You only need one to create the stroe.js file

Import {createStore} from 'redux' // createStore is used to createStore import countReduce from './count_reduce' // creation requires parameters countReduce export default createStore(countReduce)Copy the code

// Create and pass in parameters and expose to create reduce.js file –count_reduce.js

Export default function (state=' bike ',action){const {type,data}=action switch(type){case 'change': return data default: return state}}Copy the code

We’ve defined redux so how do we use it?

The state can be obtained from store.getState()

Change value store.dispatch({type:’add’,data:value}) The first state to be sent and the second value to be evaluated

Render the page because the page has not been re-rendered even though the value of redux has been changed by the above method

Subscribe (()=>{console.log('store calls this method when any state changes ')) this.setState({}) // call setState to render the page efficiently})}Copy the code

Iv. Vue EventBus

** vue -eventBus**

EventBus is also called an EventBus. Can be used in the Vue EventBus as the concept of Bridges, like all the components share the same event center, can register to the centre to send or receive events, so the component can up and down parallel to inform other components, but also is very convenient if so careless use, will cause difficult to maintain “disaster”, Therefore, a more complete Vuex is needed as the state management center. How to use it to elevate the concept of notification to the shared state level

1. Define a bus in the entry file main.js
Vue.prototype.$bus=new Vue()
Copy the code
2. Data transfer
this.$bus.$emit(eventName,params)
Copy the code
3. Data acceptance

Mounts mounts to bind events

this.$bus.$on(eventName,(val)=>{this.msg=val})
Copy the code
4. Other methods

You can also use this.bus.bus.bus. off(‘aMsg’) to remove all listening for an event within the application. Or simply call this.bus.bus.bus.bus.off () to remove all event channels without adding any arguments.

5. Message subscription and publication

There are many component libraries for message subscription and publishing, such as pub-Sub Event. It is a JS library, so it can be used in Vue React Angular, but it is rarely used in VUE

The final summary

React is all summarized by myself. I don’t know much about React. Any omissions or mistakes I hope you correct