Vue componentized combat

(I) Componentization: The VUE component system provides an abstraction that allows us to use independent reusable components to build large applications. Any type of application interface can be abstracted into a component tree. Componentalization can improve development efficiency, facilitate repeated use, simplify debugging steps, improve project maintainability, and facilitate multi-person collaborative development.

(2) Communication mode of the component: Common communication mode of the component: 1. 2.event; 3. Vuex custom events: 1. Boundary cases (1. Parent; 2.parent; 2.parent; 2.children; 3.root; 4. refs; Provide /inject) 2. Non-prop features (1. Refs; Provide /inject) 2. Non-prop features (1. Refs; Provide /inject) 2. Non-prop features (1. Attrs; 2. $listeners)

* * example: ** 1) props:{MSG :String} //child props:{MSG :String} //parent <HelloWord MSG ="hi ruby"/> 2 $emit("add",good) //parent <Cart @add="cartAdd($event)"></Cart> 3) Listening and callback management class Bus {constructor () {enclosing the callback = {}} $on (name, fn) {enclosing callbacks [name] = this. Callback [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(); //childs1 this.$bus.$on("foo",handle) child2 this. 4) VUEX creates a unique global data manager store through which to manage data and notify components of changes in state. $parent/$root = $parent/$root $on('foo',handle) // Brother2 this.parent.$emit("foo") 6)$children //parent this.$children[0]. Xx ='XXX' Childern cannot guarantee the order of child elements because there are asynchronous components 7) $attr/$Listeners contain feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and internal components can be passed in via V-bind ="$attrs" -- useful when creating higher-level components. / / the child: Foo <p>{{$attrs.foo}}</p> //parent <HelloWorld foo="foo"/> Echo (){this.$refs.hw.xx='XXX'} 8)provide (){return {foo:'foo'}} //descendant inject:['foo']Copy the code

**(3) component custom events – methods by which a child component directly modifies the value of a parent component **

1. The use of v – model

(1) component IncreaseButton. Vue

<template>
	<el-button type="primary" @click="increase"> {{innerValue}}</el-button>
</template>
<script>
export default {
	name: "IncreaseButton".model: {
		prop: "value".event: "update"
	},
	props: {
		value: {
			type: Number.default: 0}},computed: {
		innerValue: {
			get() {
				return this.value;
			},
			set(innerValue) {
				this.$emit("update", innerValue); }}},methods: {
		increase() {
			this.innerValue++; }}}</script>
Copy the code

(2) Use of components

<increase-button v-model="num"></increase-button>
<el-input v-model.number="num" style="width: 40px"></el-input>
Copy the code

Note: The V-Model implements bidirectional binding of data with a prop named Value and an event named Update. The child component cannot modify the value of a prop passed by the parent component. Combined with the use of get,set method, to achieve the child component can modify the value of the parent component

By default, a V-Model on a component makes use of a prop named Value and an event named input, but input controls like checkboxes, checkboxes, and so on May use value attributes for different purposes. The Model option can be used to avoid such conflicts.

2. Use the sync modifier (1) component

<template>
	<el-select v-model="innerValue" @change="change" >
            <el-option v-for="option in options" :key="option.value" :value="option.value" :label="option.label" ></el-option>
        </el-select>
</template>

<script>
export default {
	name: "ValueLabelSelect".props: {
		options: {
			type: Array,},value: [Number.String].label: String,},watch: {
		value: {
			handler(value) {
				this.innerValue = value;
			},
			immediate: true,}},data() {
		return {
			innerValue: undefined}; },methods: {
		change(value) {
			for (const option of this.options) {
				if (option.value === value) {
					this.$emit("update:value", value);
					this.$emit("update:label", option.label);
					break; }}},},};</script>
Copy the code

(2) Use of components

 <value-label-select :value.sync="value" :label.sync="label" :options="options">
     <div> Value: {{value}}</div>
     <div> Label: {{label}}</div>
 </value-label-select>
Copy the code

Note: Assign the value passed by prop to innerValue via watch; Fires when the innerValue value is modified

this.$emit(“update:value”, value);

this.$emit(“update:label”, option.label); Event to modify the parent component value.

**(4) slot **

Slot syntax is a content distribution API implemented by Vue for composite component development. This technique is widely used in the development of common component library. 1) Anonymous slots

 // comp1
 <div>
    <slot></slot>
</div>
//parent
 <comp>hello</comp>
Copy the code

2) Named slot

// comp2
<div>
<slot></slot>
<slot name="content"></slot>
</div>
// parent
<Comp2>
<! -- Default slot with default parameter -->
<template v-slot:default>A named slot</template>
<! -- Named slot with slot name as parameter -->
<template v-slot:content>Content...</template>
</Comp2>
Copy the code

3) Scope slot: Distribute content using data in child components

// comp3
<div>
<slot :foo="foo"></slot>
</div>
// parent
<Comp3>
<! Set the value of v-slot as a scoped context object -->
<template v-slot:default="slotProps">Data from child components: {{slotProps. Foo}}</template>
</Comp3
Copy the code