componentization

Vue componentized systems provide an abstraction that allows us to build large applications using independent reusable components. Any type of application interface can be abstracted into a number of components. Componentalization can improve development efficiency, facilitate repeated use, simplify debugging steps, improve project maintainability, and facilitate multi-person collaborative development.

Common communication modes of components

  • The parent passes values to the child
  • Custom event child passes value to parent
    //child
    this.$emit('eventHandle',value)
    
    //parent
    <Child @eventHandle="childHandle"></Child>
Copy the code
  • Event Bus Indicates the event bus
The transfer of values between any two components is usually in the event bus or VUEX mode. Bus: Event dispatch, listening, and callback management using the observer mode. class Bus{ constructor(){ this.callbacks = {} } $on(name,fn){ this.callbacks[name] = this.callbacks[name] || [] this.callbacks[name].push(fn) } $emit(name,args){ if(this.callbacks[name]){ this.callbacks[name].forEach(cb => cb(args))  } } } //main.js Vue.property.$bus = new Bus() //child1 this.$bus.$on('foo',handle) //child2 this.$bus.$emit('foo')Copy the code
  • Vuex creates a unique global data manager, store, which manages data and notifies components of state changes.

Edge cases

  • $parent $root

Sibling components can communicate with each other via a common ancestor bypass,$partent or $root

  • $children

The parent component can communicate with the children by accessing the children

  • $refs

Gets the child node reference

  • provide/inject

Can realize the transmission of values between ancestors and descendants. The string does not support responsivity. If the value is a reference value that has been processed responsivity, the value is responsivity.

  • The characteristics of prop
    • $attrs
    • $listeners

    Contains property bindings (except class and style) that are not recognized as prop in the parent scope. When a component does not declare any prop, all parent scope bindings (except class and style) are included, and internal components can be passed in via V-bind =”$attrs” — useful when creating higher-level components (for generational reference).

Developing component essentials

Boundary cases are not recommended when developing components. Because there’s a lot of coupling. When calling data with $parent, for example, it’s easy to couple it with the currently associated component. New problems may arise if the location of components changes during component refactoring in the future. It breaks the high cohesion and low coupling of components.

slot

Slot syntax is a content publishing API implemented by Vue for composite component development. This technique is widely used in the development of common component library.

  • Anonymous slot
    //Parent
    <Child>Vue</child>
    
    //Child
    <div>
        <slot></slot>
    </div>
Copy the code
  • A named slot
//Parent <Child> // Default slot uses default <template v-slot:default></template> // Named slot uses slot name as parameter <template v-slot:content></template> </Child> //Child <div> <slot></slot> <slot name="content"></slot> </div>Copy the code
  • Scope slot
//Parent <Child> // Specify the value of v-slot as the scoped context object <template V-slot :default="slotProps"> {{slotProps.foo}} </template> </Child> //Child <div> <slot :foo="foo"></slot> </div>Copy the code