vue component (vue CLI) + vue routing + parent-child component parameter transfer + Axios cross domain

Vue component (Vue CLI)

Previously: HTML, CSS and JavaScript had only one primary node

<html>
<style></style>
<script></script>
</html>

Now: HTML, CSS and JavaScript have three primary nodes

SFC specification: single file component specification

Understanding: in the past, the front desk was composed of many HTML pages; in the past, the front desk was composed of many vue components

1. Custom components

Steps: (1) create vue project and open the folder with VScode

(2) create files a.vue and b.vue in the components folder

(3) custom components

Important ①: the root label of the component should be the template label

Important ②: there can only be one root node in the template tag. For example, if a root node div is written in the template tag, there can only be a unique set of div tags as the root node, otherwise an error is reported. (the root node is not limited to div, but can be any label, but must be unique)

<template>
    <div>
       //All component contents are written in the root node
    </div>
</template>

Important ③: components must be exported before they can be used

<script>
export default {
   name:'A',//The name attribute is usually the same as the file name, such as the file name A.vue, where name is written as A
}
</script>

(4) Open the App.vue (the entry component of the App.vue project, which is used to access the main page of the project) file

① Import components

//Import two components a and B in the script tag
//“ . ” Represents the current path
import A from './components/A.vue'
import B from './components/B.vue'

② Registered components: components

export default {
  name: 'App',
  components: {
    A,B
  }
}

③ Reference component

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
     //Reference component
    <A></A>
    <B></B>
  </div>
</template>

(5) Data: in the component, data becomes a method (formerly an attribute, but in the component, it is a method)

export default {
name:'A',
data(){
    return {
        person:{name:'Zhang San',age:30}
    };
}  
}

2. Two component instances

(1) Example 1

<template>
    <div>
        <input type="text" v-model="person.name" /><br />
        <input type="text" v-model="person.age" /><br />
    </div>
</template>
<script>
export default {
    name:'A',
    data(){
        return {
            person:{name:'Zhang San',age:30}
        };
    }
}
</script>

(2) Example 2

<template>
    <div>
        <table>
            <thead>
                <tr><th>Serial number</th><th>name</th><th>Age</th></tr>
            </thead>
            <tbody>
                    //v-bind:key="index" after downloading eslint, you need to do this without reporting an error
                <tr v-for="(person, index) of list" v-bind:key="index">
                    <td>{{index+1}}</td>
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    name:'B',
    data(){
        return {

            list:[{name:'Li Si',age:40},{name:'Wang Wu',age:50}]

        };
    }
}
</script>

3. Component nesting

Example: put components A and B in component D to display the D page

//D.vue interface code
<template>
    <div>
        <h1>D page</h1>
        <A></A>
        <B></B>
    </div>
</template>
<script>

//Here, the imported component should start with @ to represent src
import A from '@/components/A.vue'
import B from '@/components/B.vue'

export default {
    name:'D',
    components:{
        A,B
    }
}
</script>

//App.vue interface code
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <D></D>   
  </div>
</template>

<script>
// Import components
import D from './components/D.vue'

export default {
  name: 'App',
  // Register components
  components: {
    D
  }
}
</script>

Vue routing

(1) Route installation: NPM install Vue router

(2) Create configuration routing file (src/router/index.js)

(1) Import vue: import Vue from 'vue'

(2) Import route: import route from 'Vue router'

(3) Use routes in vue instances: Vue.use(Router);

(4) Import components

(5) Create a routing instance and export it

//(1) Import vue
import Vue from 'vue'
//(2) Import route
import Router from 'vue-router'

//(4) Import components
import A from '@/components/A.vue'
import B from '@/components/B.vue'
import D from '@/components/D.vue'

//(3) Using routing in vue instances
Vue.use(Router);

//(5) Create a route instance and export it (route is like a navigation bar)
export default new Router({
    //Routing configuration: there is an array
    routes:[
        {
            name:'A',//Route name
            path:'/A',//Jump path (access path)
            component:A//Component properties
        },
        {
            name:'B',
            path:'/B',
            component:B
        },{
            name:'D',
            path:'/D',
            component:D
        }
    ]
})

(3) Main js: introduce routing in the entry js file

(1) import router from '. / router'

(2) router introduction

//(1) Introduction routing
import router from './router'

new Vue({
    //router introduction
  router,
  render: h => h(App),
}).$mount('#app')

(4) Use routing (App.vue)

(1) Router view: display page

(2) Router link: the jump path label, which contains the jump attribute to

//(1) Router view: display page (display routing view)
<router-view></router-view>
//(2) Router link: the jump path label, which contains the jump attribute to
<router-link to="/A">A assembly</router-link>
<router-link to="/B">B assembly</router-link>
<router-link to="/D">D assembly</router-link>

***Note: if you want to access the homepage now (assuming page A is the homepage)***

export default new Router({
    routes:[
        {
            path:'/',//Define a root path
           redirect:'/A'
        }
    ]
})

Additional: if you do not want to import components in the file (src/router/index.js), you can also use the arrow function to import:

Take import A from '@/components/A.vue' as an example:

//import A from '@/components/A.vue'

 		{
            name:'A',
            path:'/A',
            component:() => import(@/components/A.vue)
        }

(5) Route jump (written in methods)

① Jump according to route name

② Jump according to routing path

//Jump according to route name
//this indicates the current vue instance
this.$router.push({name:'B'})

//Jump according to routing path
//this indicates the current vue instance
this.$router.push({path:'/B'})

(6) Route jump: data transfer (parameter transfer)

There are two types of front-end data: ① data interaction between front-end and back-end

② data transfer between front desk components

For example:

Suppose there are two components, component A and component B. component A is a table with many rows and data, such as "Zhang San, 30". Now we need to do a query function. Once you click "Edit", it will jump to page B. component B is a single department information form, and then list all the information of Zhang San:

Method 1: Send a request to the back station. There is a method to find a single by id in the background. After clicking Edit, the background finds Zhang San's information according to id, and then transmits Zhang San's information to component B (applicable to large concurrency)

Method 2: jump from component to component, and the data information of component A jumps to component B (applicable to small concurrency)

A component	B assembly
form	Single department information form
Zhang San, 30
Background data

(1) Jump to pass parameters according to route name: params

this.$router.push({name:'B',params:{a:1,b:2}})
this.$route.params.a
this.$route.params.b

(2) Jump to pass parameters according to routing path: query

this.$router.push({path:'/B',query:{c:3,d:4}})
this.$route.query.c,//Get the data of c
this.$route.query.d//Get d's data

(7) Additional: properties of routing configuration

export default new Router({
    mode: 'history', //Routing mode. The values are history and hash
    base: '/', //Packaging path, the default is /, which can be modified
    routes: [
    {
        path: string, //route
        component: Component; //Page components
        name: string; // Named route - route name
        components: ( ComponentName | ()=>import('Page address') ); // Named view components
        redirect: string | Location | Function; // redirect
        props: boolean | string | Function; // Routing component pass parameters
        alias: string | Array<string>; // Route alias
        children: Array<RouteConfig>; // Nested sub routing
        beforeEnter?: (to: Route, from: Route, next: Function) => void; // Routing individual hooks
        meta: any; // Custom tag attributes, such as whether login is required
        icon: any; // Icon
        // 2.6.0+
        caseSensitive: boolean; // Are matching rules case sensitive? (default: false)
        pathToRegexpOptions: Object; // Compile regular options
    }
    ]})

Focus: parameter transfer between parent and child components

D parent component

A sub assembly

1. Parameter transfer (data transfer) from parent component to child component: transfer parameters through user defined attribute: props

Description: through props attribute

Example of parameter transfer from parent component D to child component A:

//Parent component D
<template>
    <div>
        <h1>Parent component D</h1>
        <A c1='Wang Wu' c2='50'></A>
	</div>
</template>

//Subassembly A
<template>
    <div>
        <h1>Subcomponents A</h1>

        //Page A displays C1, C2
        {{c1}}{{c2}}
		
		//You can also bind C1 and C2 to page A
        <input type="text" v-model="person.name" /><br />
        <input type="text" v-model="person.age" /><br />
      
    </div>
</template>
<script>
export default {
    name:'A',
    data(){
        return {
           person:{name:'',age:''}
        };
    },
    methods:{
    //props: attribute definition    
    props:['c1', 'c2']
}
</script>

2. Parameter transfer from child component to parent component: through user defined event: $emit

//Sub assembly A build
<template>
    <div>

        <h1>A page</h1>

        <button @click="m3">The child component passes data to the parent component</button>
    </div>
</template>
<script>
export default {
    name:'A',
    data(){
        return {
            
        };
    },
    methods:{
        m3(){
            // First parameter: Event
            // Second parameter: Data
            //$emit: used to register events
            //A Zhao Liu and a 60 are passed to the parent component
            this.$emit('e1','Zhao Liu');
            this.$emit('e2','60');
        }
    }
}
</script>

//Parent component D component
<template>
    <div>

        <h1>D page</h1>
		//Trigger e1 event and call method1 method
        <A @e1="method1" @e2="method2"></A>
    </div>
</template>
<script>
import A from '@/components/A.vue'
import B from '@/components/B.vue'

export default {
    name:'D',
    components:{
        A,B
    },
    methods:{
        method1(v1){
            alert(v1);
        },
        method2(v2){
            alert(v2);
        }
    }
}
</script>

The logical idea of transferring child components to parent components:

Click the button in sub component A to call the m3 method, which violates the e1 event. Since the e1 component binds the method1 method in the parent component D component, the parameter 'Zhao Liu' of e1 will be passed in through the parameter v1 of method1; The other is the same

Keywords: Front-end Vue

Added by Cailean on Tue, 21 Dec 2021 06:36:34 +0200

Programming VIP

vue component (vue CLI) + vue routing + parent-child component parameter transfer + Axios cross domain