Human relationships are complex and need to be maintained, so phone calls are unavoidable
How long has it been since you called?
How long has it been since you got a call?
Do you remember your cell phone ringtone ？？？？
Dad calls his son ☎️
The parent component uses the V-bind variable to pass in data
/ / the parent component
<Child :name="name" :clickFn="handleClick"/>
Copy the codeThe child component implements props on options to accept data passed by the parent component
Props accepts the constraint data in four ways listed below:
// Method 1: Pass the variable name directly without any type or value constraints
props: ['name'.'handleClick']
// Approach 2: Pass the variable name + type constraint
props: {name: String.handleClick: Function
}
// Approach 3: Pass the variable name + multiple type constraints
props: {name: [String.Number]}// Approach 4: Pass the variable name + type constraint + default value
props: {name: {type:String.default: 'zhangshan'
},
handleClick: {type: Function.default: () = >{}}}Copy the codeAnd in order to ensure that a single line of data stream does not cause other child components to use the data passed by the parent component, it is required that the child component cannot modify the value of the data of the props (the program will also tell us by reporting an error).
The son calls his father ☎️
The vUE prototype implements the $emit method for sending events
The child component sends events via $emit to the parent component, which listens for the events via v-on
/ / child component
<button @click="$emit('onChildClick')">click me </button>
/ / the parent component
<Child @onChildClick="OnChildClick" />
Copy the codeIf you need to pass arguments, you can write directly to the second argument of $emit
/ / child component
<button @click="$emit('onChildClick', item)">click me </button>
/ / the parent component
<Child @onChildClick="OnChildClick" />
onChildClick(item){
console.log('I received the argument from the child component! ', item)
}
Copy the codeDad took the initiative to pick up the son’s phone ☎️
Ref is an attribute that can be set on the child tag. We can call the child attribute or method from this.$refs.childRef to get the instance of the child.
<Child ref="childRef"/>
this.$refs.childRef.onChildClick()
Copy the codeIn addition to ref, you can also use $children to get an instance of a child component and call its properties or methods from that instance!
this.$children[0] // The first child component
Copy the codeThe son took the initiative to pick up the father’s phone ☎️
This.$parent can be used to get the parent instance of a child component and call its properties or methods from that instance. Same as above.
Note: Children have many children, but only one father
Grandpa calls his grandson ☎️
Grandpa was a little tired of calling his grandson. He didn’t know his grandson’s phone number, so he found that he had to call dad first, and then dad called grandson! 😢
Grandpa spoke very slowly, one word at a time,
The grandpa component passes the parameters along, layer by layer, intact
/ / grandpa
<Parent :name="name" :age="age": gender = "gender" / >/ / father
<Child :name="name" :age="age" :gender="Gender" />
props:['name'.'age'.'gender']
/ / a grandson
<div>{{name}} - {{age}} - {{gender}}</div>
props:['name'.'age'.'gender']
Copy the codeGranddaughter sheep sheep 🐑 is our home the most clever lovely little girl!
Goat goat couldn’t watch anymore, so he got a recorder, recorded all the words grandpa said, and sent the recorder to Dad:
V -bind=”$props” pass all props, making it a little easier
/ / grandpa
<Parent :name="name" :age="age" :gender=gender/>
// Dad props to accept && props to pass
<Child v-bind="$props"/>
props:['name'.'age'.'gender']
// Son Props accepts
<div>{{name}} - {{age}} - {{gender}}</div>
props:['name'.'age'.'gender']
Copy the codeBut found that the father needed to break down all the words in the recorder and pass them on to his son one by one,
Sheep sheep can’t watch, tell dad, you don’t need to listen to the words in the recorder and then tell your son, you just need to grandpa the recorder directly to his son ah!
One of the functions of v-bind=”$attrs” is to pass values that are not in props,
The parent component does not need to accept arguments passed from the parent component, nor does it need to pass arguments to the child component!
/ / grandpa
<Parent :name="name" :age="age" :gender=gender/>
/ / father
<Child v-bind="$attrs"/>
// Son Props accepts
<div>{{name}} - {{age}} - {{gender}}</div>
props:['name'.'age'.'gender']
Copy the code// Son Props does not accept
<div>{{$attrs.name}} - {{$attrs.age}} - {{$attrs.gender}}</div>
Copy the codeGrandson calls grandpa at ☎️
Grandson first called $emit(‘onChildClick’) to his dad, who broke down what grandson wanted to say and then called grandpa @onchildclick =”$emit(‘onChildClick’)”
/ / son
<button @click="$emit('onChildClick')" @click="$emit('onChildClick1')">click me </button>
/ / dad
<Child @onChildClick="$emit('onChildClick')" @onChildClick1="$emit('onChildClick1')"/>
/ / grandpa
<Parent @onChildClick="Console. log(' I finally got a click event from my grandchildren! ')" @onChildClick1="Console. log(' I finally got a click event from my grandkids! ')"/>
Copy the code“Daddy,” said the sheep, “put the phone directly to grandpa.” Why are you listening in on a conversation?!
V-on =”$listeners” can package events 📦
/ / son
<button @click="$emit('onChildClick')">click me </button>
/ / dad
<Child v-on="$" listeners />
/ / grandpa
<Parent @onChildClick="Console. log(' I finally got a click event from my grandchildren! ')"/>
Copy the codeQin Shi Huang (ancestor) called me ☎️
When our component hierarchy is deeper, A -> B -> C -> D -> E -> F, the above methods are not applicable, we can use provide & Inject to deliver data across the hierarchy.
As long as the parent component declares provide, it can interact with its child component, grandson component, great-grandson component and other components that can form upstream and downstream relationship. No matter how deep it is, it can access data in the Provider through Inject.
// The uppermost component elForm
provide(){
return {elForm:this}}// The bottom component elFormItem
inject: ['elForm']
Copy the code(gourd baby) water baby to fire baby call ☎️
Example: props + emit + on
Brother 1 component EMIT -> parent component on -> brother 2 component props
Expected behavior: Sibling 1 emits events and sibling 2 emits on events
event bus
Global EventBus, while not recommended in some examples, is a nifty and simple way to share data across components.
1. Define an empty Vue instance as the central event bus.
2. Component A defines methods to trigger custom events
3. Component B listens in the hook
var EventBus = new Vue();
this.$bus.$emit('call', {... });this.$bus.$on('call'.($event) = >{... })Copy the codevuex
Vuex was developed specifically for vue.js applicationsStatus management mode. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.
export default new Vuex.Store({
state: {
userInfo:{}
},
mutations: { // commit
updateUserInfo (state,Object) {
state.userInfo= Object}},actions: { // Dispatch side effects
getUserInfo(context){
// 1. Send an HTTP request to retrieve user information
const userInfo = http()
// 2. Run the commit command to change the state of the mutation
context.commit('updateUserInfo', userInfo)
}
},
getters: {userInfo: state.userInfo
}
})
Copy the codeconclusion
Components can communicate in many ways:
-
Props implements data passing down
-
Emitandemit and Emitandon implement data release and monitoring
-
Ref,ref, ref,parent, $children can get the instance of the component
-
Functions,props, props,attrs, $Listeners can package data/events 📦
-
Eventbus and Vuex enables communication across components
And there are other unwritten forms of communication…
The last
Finally, this is also an article looking for friends, come and call me! ☎ ️
