Unidirectional data flow of vUE 🥚🥚🥚

All prop causes a one-way downward binding between parent and child: updates to the parent prop flow down to the child component, but not vice versa.

Personal understanding: Your father can pass his genes on to you, but you can’t pass your genes on to your father

Vue’s parent and child lifecycle hook functions are executed in the following four parts:
  1. Loading the render process: Parent beforeCreate -> parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> Child Mounted -> parent
  2. Child component update process: parent beforeUpdate -> child beforeUpdate -> child Updated -> parent updated
  3. Parent component update process: parent beforeUpdate -> Parent updated
  4. Destruction process: parent beforeDestroy -> child beforeDestroy -> child Destroyed -> parent Destroyed

Each time the parent component is updated, all of the prop in the child component will be refreshed to the latest value. This means that you should not change a prop inside a child component. If you do, Vue will issue an alert in the browser’s console. When the child component wants to modify, it can only send a custom event through $Emit. After receiving the event, the parent component will modify it. There are two common situations in which you try to change a prop:

  • This prop is used to pass an initial value; The child component next wants to use it as a local prop data. In this case, it is best to define a local data property and use the prop as its initial value
  • The prop is passed in with a raw value and needs to be converted. In this case, it is best to use the value of the prop to define a computed property
How do children modify their parents
  • Subscribe to custom events: Pass a method (parent) based on a property when calling a component
<my-component @func='xxx'></my-component>New Vue({methods:{XXX (value){//=>value = this.$emit}}});Copy the code
  • Notification of custom event execution (child)
{
  methods:{
    xxx(){
      this.$emit('func'.10); }}}Copy the code
  • This method can also be used to realize the information communication between sibling components (parent and child components, generational components)
let eventBus=new Vue; //=> Create the event bus

/ / A component
eventBus.$on('xxxA'.this.func);

/ / B component
eventBus.$emit('xxxA');
Copy the code
The communication between father and son components is realized based on REF
  • If the ref is used on a normal DOM element, the reference refers to the DOM element. If used on a child component, the reference points to the component instance, which allows you to quickly retrieve and manipulate the data in the child component
  • $parent and $children are instances of components and children, but $children is an array
Provide and Inject are used to implement communication between ancestors and descendants
  • The ancestor component needs data for use by the descendant component based on the provide registry
{
  provide: {//=> Either the object or the function that returns the object (if the property value is in data, it must be processed using the method of the function).
    name:'eggs'.year:10},... }Copy the code
  • The descendant component declares the data that needs to be used based on inject and fetches it for use
{
  inject: ['name'].methods:{
    func(){
      let name=this.name; }}}Copy the code