vue路由传参及组件传参和组件方法调用

VUE路由和组件传参

第一种vue自带的路由传参的三种基本方式

1.通过name :id传参

子组件通过$route.name接收参数

{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
}

this.$router.push({
    path: `/particulars/${id}`,
})

通过p>{{$route.name}}</p>或者this.$route.name获取传参 (备注：刷新数据不会丢失)

p>{{$route.name}}</p>

this.$route.name

2.通过路由属性中的name来确定匹配的路由，通过params来传递参数 以POST方式传参（备注：刷新数据会丢失）

this.$router.push({
     path:'particulars',
     name: 'particulars',
     params: {
            id: id
     }
})

3.使用path来匹配路由，然后通过query来传递参数，并以GET方式传参数 (备注：刷新数据不会丢失)

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

第二种组件传参及方法调用

1. 通过 props传参

父组件代码

父组件代码
<template>
    <div id="box1">
        <nav-button :src="src" @credentials="credentials" :isCheck="isCheck" ref="navButton"></nav-button>
    </div>
</template>

<script>
    import NavButton from '../module/NavButton'
    export default{
        components:{
            NavButton,
        },
        data(){
            return {
                src:'1',
                isCheck:1
            }
        }
    }
</script>          

子组件代码

<template>
    <div>
        <div style="display: flex;margin-bottom:15px;">
          {{src}}

        </div>
    </div>
</template>
<script>
import storage from '../../storage'
    export default{
        name:'NavButton',
        props:['src','isCheck'],
        watch:{
            src(val){
                this.src1 = val
            },
            isCheck(val){
                this.isCheck1 = val
            },
        },
        data(){
            return {
                src1:this.src,
                isCheck1:this.isCheck,
            }
        },
        mounted(){
            console.log("button mounted")
            this.getBtnParmList(this.tabSeq1)
        },
        methods:{
            getBtnParmList(val){
                  console.log(this.src1)
            },
        }
    }
</script>

子组件调用父组件方法并传参$emit()

this.$emit('feedback',val)  

子组件调用父组件方法$parent

this.$parent.apply()

父组件调用子组件并传参（备注：子组件的ref=“navButton”） 如果不想传参直接去掉就可以了

this.$refs.navButton.getBtnParmList(this.tabSeq)

　　$emit()方法

this.$refs.navButton.$emit('getBtnParmList',this.tabSeq)