開發過程中參數傳遞
1. 通過 name 傳遞參數
圖一
圖二
我們常把頁面的路由配置在圖一中的 router 文件夾下的 js 文件中，圖二爲配置的內容。這其中的 name 屬性是可以作爲參數傳遞的，在模版中直接只用 {{$route.name}} 接收，即可以在模版中顯示。
2. 通過 < router-link > 中的 to 傳遞參數
使用 < router-link to=" /page "> page < /router-link > 可以實現頁面的跳轉，這裏面 to 是可以帶上參數跳轉的，我們需要在給 to 進行綁定，即 : to (v-bind:to)
<router-link :to="{name:'page',params:{data:'我是App.vue傳至page.vue的參數'}}" >page</router-link>
- 這其中需要注意的是要給 to 加上綁定，後面跟的是對象形式的字符串。
- 其中的 name 是我們在路由配置文件（上圖圖二）中配置的 name 兩者要對應。
- params 即是我們要傳的參數，它可以是多個值。
隨後在對應的模版頁面中（這裏爲 page.vue）進行接收。
{{$route.params.data}}
3. 在業務邏輯中實現頁面跳轉並傳參
當在業務邏輯中需要實現頁面跳轉經常能夠使用到編程式導航：
-
this.$router.go(1)，進入下一級
-
this.$router.back(-1)，返回上一級，通俗的說就是前進與後退。
-
this.$router.push(’/page’)，跳轉到 page.vue
那麼我們應該如何傳遞參數呢？例如，我們在判斷完某個條件後需要跳轉到 page 頁並且需要傳遞 age 和 address 兩個參數過去，我們的操作方法是：
App.vue
<div @click="toPage">page</div>
我們在需要的地方加上點擊事件
toPage(){
this.$router.push({
name: 'page',
params: {
age: 22,
address: 'China'
}
})
}
隨後在 methods 中寫入該事件，需要注意的是這裏面的 name 同樣是要與在配置路由時配置的 name 屬性保持一致。
params 是我們傳入的參數，可以是常量也可以是變量。
page.vue
在 page.vue 中接收參數，可以在生命週期的 mounted() 接收並且放入 data ，再在模版上顯示出來。
<template>
<div>
{{myage}}-{{myaddress}}
</div>
</template>
<script>
export default {
name: "page111",
data() {
return {
myage: '',
myaddress: ''
}
},
mounted(){
// 在掛載時接收到參數並且賦值
this.myage = this.$route.params.age;
this.myaddress = this.$route.params.address;
},
}
</script>
4. 利用 url 傳參
在項目開發過程中常常通過 url 進行參數傳遞，在 vue-cli 中該如何操作呢？
1.在配置路由處以冒號形式，在 url 後方加上參數（/src/router/index.js）
{
path: '/page/:pageId/:pageTitle',
name: 'page',
component: page
}
2.在< router-link >< /router-link > 的 to 屬性中加入參數（App.vue）
<template>
<div id="app">
<img src="./assets/logo.png"><br/>
<router-link to="/" >index</router-link>
<router-link to="/page/1/標題" >page</router-link>
<router-view/>
</div>
</template>
3.在 page.vue 中接收參數
<template>
<div>
<p>id: {{$route.params.pageId}}</p>
<p>標題： {{$route.params.pageTitle}}</p>
</div>
</template>
5. 父組件與子組件之間傳參
項目中組件是經常被使用到的，那麼父組件與子組件之間的聯動是非常重要的。
1.先建立一個組件並且使用，在 components 文件夾下新建 component.vue 文件作爲組件。
<template>
<div>
<p>我的組件 {{msg}}-{{content}}</p>
</div>
</template>
<script>
export default{
name: 'child',
props: ["msg","content"],
}
</script>
隨後在 page.vue 中引入該組件，在 < script > </ script > 中 import 且引用，隨後在模版中使用，如下：
<template>
<div>
<children></children>
</div>
</template>
<script>
import children from "./component";
export default {
name: "page",
components: {
children
}
}
</script>
要傳遞參數，可以在 < children > </ children >標籤中加入要傳入的參數，並且在組件（component.vue）中使用 props 接收再使用插值在模版中顯示。
同時我們也可以給要傳的參數綁定起來，如下第二種寫法，在參數前加上冒號（v-bind）這樣我們就能在 data 中編輯我們的參數了。
// page.vue
<children msg="我是信息" content="我是內容"></children>
<children :msg="message" :content="content"></children>
<script>
import children from "./component";
export default{
name: 'page',
components: {
children
},
data(){
return {
message: '我是信息',
content: '我是內容'
}
}
}
</script>
// component.vue
<p>我的組件 {{msg}}-{{content}}</p>
<script>
export default{
name: 'child',
props: ["msg","content"]
}
</script>
子組件再傳值回父組件，在函數中使用 this.$emit()
// component.vue
<script>
export default{
name: 'component',
data() {
return {
param："需要傳回的參數",
data: "參數2"
}
},
props: ["msg","content"],
methods: {
// 假設在子組件選擇完畢後點擊將 param 傳回
chooseOk(){
// ...中間的邏輯處理省略
this.$emit('changeData',this.param,this.data);
}
}
}
</script>
在 page.vue 的 < children > 標籤中加入 @changeData，即可在點擊子組件之後在父組件出接收到傳過來的參數
<children :msg="msg" :content="content" @changeData="dataChange"></children>
<script>
import children from "./component";
export default {
name: "page",
components: {
children
},
methods: {
dataChange(param,data){
console.log(param + ',' + data);
}
}
}
</script>
最後在附加一點，在父組件中該如何調用子組件中的函數呢，這裏需要用到 ref 屬性，添加在我們的 < children > 標籤中
// page.vue
<div @click="ifClick">click</div>
<children ref="child" :msg="msg" :content="content" @changeData="dataChange"></children>
// 重複部分省略 ...
methods: {
ifClick(){
this.$refs.child.isClick();
}
}
// component.vue
methods: {
isClick(){
console.log("父組件點擊了");
}
}
好了，以上是我在學習過程中能夠使用到的幾種方式，若有錯誤或者遺漏還請各位大神指點。本人文筆不精，如有問題，歡迎留言提問，祝大家早日成爲大神！