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)