vue component development

Developed in vue, are developed with the idea of component. Generally, when a project is built, component templates will be built first, and shelves will be put up. That is, the <template>view layer, <script>logic layer, and <style>css style layer are defined in the component.

Typically, a components folder is created in the project src to store our customized components, which are imported and registered in the required pages and used as labels.

1.Step 1: Introduce subcomponents into the page,(Assume in components There is one under the file myHeader.vue assembly)
import myHeader from '@/components/myHeader.vue'
2.Step 2: Register subcomponents
components:{
	myHeader
}
3.Step 3: Use as a label
<myHeader />
perhaps
<myHeader></myHeader>

Benefits of using components

• Components are reusable
• Easy to maintain
• Encapsulated and easy to use
• Reduce duplication between components in large projects

Classification of components

Components are divided into global and local components
Global Components

import Loading from '@/components/myLoading.vue'
Vue.component('loading',Loading)

Local Components

<script>
import Loading from '@/components/myLoading.vue'
export default {
	data() {
		return {}
	},
	components:{
		Loading,
	}	
}
</script>

Communication between components

Fathers and descendants

Parent component:<list :list="list"></list>
// props receive data that resembles data and can be used directly like data
# First method
 Parent binds a property to child components,Subcomponents pass through props To receive data
 Sub-components:
props:["list"]	//Receive with Array
props:{			//Receive by Object
    list:Array, //Short form of object reception
    list:{		
        type:Array,	
        default:()=>{
            return []
        },
        required:true //Define whether this property must be passed
    }
}
# Second method
 Use provide/inject
provide vue Official recommendation for use in advanced components provide The provided array can be used in any of its descendant components inject Receive methods that can use arrays to receive data
# Third method
 Use $parent
 Subcomponents can be this.$parent Find the parent component to find all the data and methods of the parent component
# Fourth method
 Use vuex

Summary:
1. For the first method:
In vue2: Default values referencing data types (arrays, objects) need to be returned through a function to be used. Default values take effect when the attribute value is undefined or if the attribute is not passed
2. The child component accepts the value of the parent component as either a reference type or a normal type
Normal type: string,number,boolean,null
Reference type: array, object subcomponents cannot modify themselves

Child heir

# First method
 The parent binds a custom event to the child component through this.$emit('Custom Event Name',parameter)send data
 Sub-components:
<button @click="add"></button>
<script>
    data(){
    return {},
    methods:{
        add(){
            // Parameter 1: Method defined by parent component [event name]
            // Parameter 2: Optional, the data passed by the child component to the parent component can be multiple
            this.$emit("add",this.name)
        }
    }
}
</script>
Parent component:
<list @add="add"></list>
<script>
    data(){
    return{},
    methods:{
        add(i){
            console.log(i)	// Data passed by child components to parent components
		}
    }
}
</script>
# Second method
 Use this.$children Get all the subcomponents of the component
# Third method
 Use vuex

Summary:
For the first method:
1. Subcomponents need to trigger a custom event in some way, such as by clicking on an event
2. The value to be passed as the second parameter of $emit will be passed as an argument to the method that responds to the custom event
3. Bind child component $emit custom method on parent component

Between brothers

# First at main. Hang a bus object globally in JS
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$bus = new Vue()
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

# In components that need to pass data
<template>
    <div @click="sendData">This is Component One</div>
</template>
<script>
export default {
    data() {
        return {
            money: "I have five cents and can't buy hot strips"
        }
    },
    methods: {
        sendData() {
            // console.log(this);
            this.$bus.$emit('getData', this.money)
        }
    }
}
</script>
// In components that need to receive data
<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
    data() {
        return {
            msg: ''
        }
    },
    created() {
        $on The first argument to the listen method is the function name of the function to listen on and the second is the callback function
        this.$bus.$on('getData', (data) => {
            this.msg = data
        })
        // The way to turn off listening for events is this.$bus.$off('event name')
    }
}
</script>

Summary:
Through main.js initializes a global $bus through this. $ Bus. $ Emit (Event Name, passed parameter information) is sent, and the party receiving the event passes this. $ Bus. $ On (Event Name, Parameter) receives the passed event

Component Style Penetration

To keep the styles in the component from affecting the styles of other components, scoped is added only for the current component.

<style lang='scss' scoped></style>

Sometimes we want a style to affect subcomponents, so we can use operators

css in
<style scoped>
	>>> .active {}
</style>
sass in
<style lang='scss' scoped>
	/deep/ .active {}
</style>