Vue componentization

This is the 17th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

One, componentization

I believe you are familiar with the componentization of VUE, and I will summarize it in detail today. The Vue component system provides an abstraction that allows us to build large applications using separate reusable components. Componentization can be reused to improve development efficiency and maintainability of project wood, so as to better cooperate with multi-person development.

Component communication mode

1. The parent component passes to the child component. If the child component writes the default value and checks whether the child component exists by using the props field, there is a problem. Therefore, when using the props field, do not write default

   // Parent component: <Button :name='name' :handerAdd='handlerAdd' /> // Child component: {name: {type: String}, handleAdd: {type: Function }}Copy the code

2. 
   $emit/$On custom event that child component passes to parent component

   $emit('handlerAdd',good); $emit('handlerAdd',good);Copy the code

3. The event bus, which acts as an intermediary, is used to transfer values between any two components as well as vuEX below

   / / Bus: Class Bus {constructor(){this.callbacks = {}} $on(name, constructor); 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.prototype.$bus = new Bus(); $bus.$on('foo', handle); This.$bus.$emit('foo');Copy the code

4. Vuex creates a unique global data manager, store, that manages data and notifies components of status updates.

Edge cases

The boundary case is: when the business is complex, the reduction of strong coupling between components and other components will lead to poor component reusability

1. Parent/parent/parent/root brother used for communication between components, the parent the parent component, the parent the parent component, the parent the parent component, the root is the root instance, can be bypass through a common ancestor

   $parent.$on('count', handle); This.$parent.$emit('count');Copy the code

2. ** Children ∗ * Parent can access the child’s data through children** Parent can access the child’s data through children, enabling parent-child communication, but $children cannot guarantee the order of child elements (because there are asynchronous components).

   // This.$children[0]. Count = 'count';Copy the code

3. 
   $Refs gets the child node reference, and$The difference between children
   $Refs can get any node as long as they are defined,$Children must be a custom component

   <Button ref=' BTN '/> mouted() {this.$refs.btn.xx =' XXX '; }Copy the code

4. Provide/Inject mainly implements value transmission communication between ancestors and descendants

   // Ancestor component provide() {return {count: 'count'}} // Descendant component inject: ['count']Copy the code

5. The props attributes attrs/attrs/attrs/listeners is mainly used to separate DaiChuanCan, contains the parent component not be identify as props for the characteristics of (except binding style and class). When a component does not declare any props, this contains all parent component scopes and can be passed in to the internal component via v-bind=’$attrs’, which is useful when creating higher-order component extensions (like react higher-order components).

6. $attrs <Button name='name' /> $listeners/tools: name <div>{{$attrs.name}}<div> $listeners on the steps of the process are: @process =" onnotice" <div @click="$emit('some-event', 'msg from grandson')"> {{msg}} </div>Copy the code

Well, that’s all. Thanks for reading