我的歷經面試題總結

時間 2019-11-16

原文原文鏈接

Vue路由進行跳轉時如何傳遞參數：

經過query參數來進行參數的傳遞javascript

咱們能夠在路由組件的路由配置對象裏寫上咱們須要傳遞的參數，而後經過this.$route.path.query來獲取到咱們傳遞的參數。好比:vue
例：
```
const route=[
        {
            path:"/one",
            query:{
                id:1,  //這樣咱們就能夠經過this.$route.query來獲取query參數
            }
        }
     ]
複製代碼
```

經過params傳遞參數java

咱們須要在路由配置對象裏這樣寫webpack

例：

const route=[
        {
            path:"/one:id",//這樣這個id就是params參數沃恩能夠經過this.$route.params
            component:index
        }
     ]
複製代碼

Vue的組件通訊：

Vue的組件通訊分爲如下三種：web

父子通訊vue-cli

好比a組件是b組件的子組件，咱們先給在b組件的組件模板中找到a組件標籤而後給a組件標籤綁定自定義屬性，屬性值是要傳遞的數據。而後在a組件的組件配置裏經過props進行接收，而後直接把傳遞過來的數據當成a組件配置對象的data裏的數據用便可。npm
例：
```
//這裏是b組件的組件模板，index標籤是a組件的組件標籤,num是自定義屬性,net是要傳遞的數據
 <index :num="net"></index>
 
 //這裏是a組件的組件配置
 props:["num"]
 //還能夠這樣接收
 props:{
     num:Array
 }
複製代碼
```
子父通訊：app

好比a組件是b組件的子組件，咱們須要在b組件的組件模板裏找到a組件的組件標籤給a組件的組件標籤綁定自定義事件,而後在b組件的配置裏的methods裏寫上自定義事件的事件函數該事件函數有一個參數就是傳遞過來的參數，咱們須要如今a組件的組件模板中選擇一個標籤綁定原生事件而後在該原生事件的事件函數裏調用this.$rmit("在b組件的組件模板中給a組件的組件標籤綁定的自定義事件",要傳遞的數據)函數
例：
```
//這裏是b組件的組件模板,index標籤就是a組件的組件標籤
     <index @chuandi="chuandi"></index>
  //這裏是b組件的組件配置
     methods:{
         chuandi(net){
             //這個net就是傳遞過來的數據
         }
     }
  //這裏是a組件的組件模板
     <div>
        <button @click="net"></button>
     </div>
  //這裏是a組件的配置
     methods:{
         net(){
             this.$emit("chuandi",傳遞的數據)
         }
     }
複製代碼
```

非父子通訊：ui

想要實現一個非父子通訊咱們須要建立一個新的new Vue實例化對象而後經過該新建立的實例化對象去進行傳遞數據

例：

//a組件和b組件是非父子關係，而後a組件向b組件傳遞數據
 //bat就是新建立的實例化對象
  const bat=new Vue({})moban
  //先在a組件的組件模板中選擇一個標籤綁定原生事件
  
       //這裏是a組件的組件模板
       <div>
        <button @click="hei"></button>
       </div>
       //這裏是a組件的組件配置
       methods:{
           hei(){
               bat.$emit("自定義事件名",傳遞的數據)
           }
       }
 //而後在b組件的組件配置的created裏使用去監聽自定義事件
     //這裏是b組件的組件配置
     created(){
         this.&on("自定義事件名",(da)=>{
         
             da就是傳遞過來的數據
         })
     }
複製代碼