个人练手项目（五）

1.实现商家头部背景图朦胧的效果

-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);

2.vue 路由传参

1.router-link传参

第一种

http://localhost:8081/#/test?name=1

<router-link :to="{path:'/test',query:{name:id}}">
跳转
</router-link>

获取：this.$route.query.id

第二种

http://localhost:8081/#/test/1

<router-link :to="'/test/'+id">
跳转
</router-link>

需要配置路由 router/index.js

{
    path: '/test/:id',
    name: 'Test',
    component: Test
}

获取:this.$route.params.id

2. this.$router.push

第一种

this.$router.push({name: 'test', params: {id: 1}
})

获取:this.$route.params.id

第二种

this.$router.push({
    path: '/test',
    query: {id:1}
})

获取：this.$route.query.id

3.vue父子组件传参

1.父组件传递数据给子组件

父组件

<parent>
    <child :child-msg="msg"></child>//这里要用-代替驼峰
</parent>
data(){
    return{
        msg: [1,2,3]
    }
}

子组件用props接受数据

方式1

props: ['childMsg']

方式2

props: {
    childMsg: Array //可以指定传入类型
}

方式3

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

2.子组件与父组件通信

因为vue只允许单向数据传递，所以可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的

子组件

<template>
    <div @click="up"></div>
</template>
methods: {
    up(){
        this.$emit('upup','2'); //主动触发upup方法，'2'为向父组件传递的数据
    }
}

父组件

<div>
    <child @upup="change" :msg="msg"></child> // 监听子组件触发的upup事件，然后调用change事件
    </child>
</div>
methods:{
    change(msg){
        this.msg=msg;
    }
}

4.nuxt中axios传参

1.POST方式

传递，在页面中定义方法

async addCount(){
    let {status, data:{code,id} = await this.$axios.post('/test/addCount', {
        count: this.count
    })
    if(status===200&&code===0){
        console.log(id);
    }
}

接受参数

router.post('/addCount', async ctx => {
    let {count} = ctx.request.body;
    ctx.body = {
        code: 0,
        id: 100
    }
})

2.GET方式 params

传递参数

async addCount(){
    let count = this.count;
    let {status, data:{code,id} = await this.$axios.get(`/test/addCount/${count}`)
    if(status===200&&code===0){
        console.log(id);
    }
}

接受参数

router.get('/addCount/:count', async ctx => {
    let count = ctx.params.count;
    ctx.body = {
        code: 0,
        id: 100
    }
})

3.GET方式 query

传递参数

async addCount(){
    let count = this.count;
    let {status, data:{code,id} = await this.$axios.get('/test/addCount',{
       params: {
           count
       }
    })
    if(status===200&&code===0){
        console.log(id);
    }
}

接受参数

router.get('/addCount', async ctx => {
    let {count} = ctx.query;
    ctx.body = {
        code: 0,
        id: 100
    }
})