vue之間的資料傳遞（父傳子 子傳父 兄弟傳值）

2021-10-17 14:08:32 字數 1536 閱讀 5348

首先，我們先建立三個頁面:主頁面parent.vue、子頁面son1.vue、子頁面son2.vue。

主頁面配置如下：

1.在主頁面中引入子頁面

import son1 from "@/son1"


import son2 from "@/son2"
2.在components中註冊

components:
3.插入子頁面
一、父傳子

首先在主頁面data中定義乙個list資料
data()]


}}
1.傳遞資料

"list"


>
注意： :後邊跟子介面接收的名字,雙引號中是需要傳過去的名字

2.子頁面son1接收資料

props: [


'parentdata'


]
二、子傳父

1.在子頁面中定義乙個事件

"primary" @click=


"updatebtn(item.id)"


>確 定
2.在methods寫入方法

methods: 


}
注意：$emit括號中第乙個引數是父元件需要接收的事件名字，第二個引數是需要傳遞的資料

3.主頁面接收

"list"  @update-data=


"updatedata"


>
注意：接收資料用@，第乙個值是子頁面定義的名字，引號中是當前頁面定義的事件名，通過事件傳遞，獲取到資料

三、兄弟之間傳值

首先在main.js中定義乙個方法

vue.prototype.方法名 = new vue(


)
1.子頁面1（son1）

"primary" @click=


"updatebtn(item.id)"


>確 定


methods: 


}
注意：定義乙個事件，使用this.public.$emit(「第二個頁面需要接收的名字」，「第二個值是傳的資料」) 傳入資料

2.子頁面2（son2）

在created中接收資料

created())


}
注意：this.public.$on(「第乙個上個頁面定義的名字」，「第二個是乙個函式（引數1：上個頁面傳過來的資料）」)

Vue資料 父傳子 子傳父 子傳子

父傳子 父元件 template div son fatherage age fathermethod log son div template script import son from son.vue export default methods components script 子元件 t...

vue 父傳子，子傳父

父元件向子元件傳值 父 子元件新增行內便簽v bind message orderlistname 之定義傳引數orderlistname 13 子 接受傳值內容props message 父頁面傳值內容，以this.message賦值。父元件 子元件 子元件向父元件傳值 子傳值 傳送傳值內容 th...

Vue元件資訊的傳遞（父傳子）（子傳父）

路由部署註冊在我的另一篇博文 vue路由的部署 總結 父傳子 在標籤上傳遞之後子元件通過props接收 子傳父 子元件類似建立乙個事件可以通過 emit傳遞 觸發父元件 父傳子 父元件 text child 此處 text 可以省略 text v model text change datachan...