vue中的父子元件之間的通訊 新增 修改彈框

2022-02-26 06:21:10 字數 1710 閱讀 9546

在乙個vue頁面中有時候內容會很多，為了方便編寫檢視，可以分為多個子元件，最後在父元件中引入對應的子元件即可。

下面這個是父子元件通訊中的乙個具體例項：新增、修改彈框。 子元件中主要寫了關於新增、修改的彈框，

子元件：

1.彈框：

可以直接使用elementui的el-dialog來寫，很多樣式就可以省略。

}


x 


立即新增


立即修改


取消
2.接收的資料以及需要依靠父元件的點選事件

props:["modify", "headers"],


cancel()
3.新增、修改時彈框顯示的內容需要進行監聽

watch: 


},
父元件：1.引入子元件：

import children from './father/children'


components: ,
2.定義需要傳給子元件的資料：

modify: '',


headers: '',
3.點選新增、修改按鈕時傳對應的資料給子元件：

adddata();


this.headers = '新增';


},editdata(row),


cancels()
注意：1.父子元件之間可以雙向傳值，父元件向子元件傳值使用props，子元件向父元件傳值需要依賴事件，然後通過emit傳遞。

2.在子元件中定義事件以及需要傳遞的值：

emit中的cancel為子元件向父元件傳值定義的方法名稱，後面可以加需要傳遞的值，只是在該例子中不需要傳值。

cancel()
3.在父元件中通過定義的方法接收到子元件傳遞的引數，即可。

cancels(data)
完整**：

新增    


table


:data="tabledata"border


style="width: 100%">


column


prop="date"label="日期"min-width="50">


column


prop="name"label="姓名"min-width="50">


column


prop="province"label="省份"min-width="70">


column


prop="city"label="市區"min-width="70">


column


prop="address"label="位址"min-width="120">


column


prop="zip"label="郵編"min-width="50">


column


label="操作">


編輯
父元件

}


x 


if="headers == '新增'">立即新增


else>立即修改


取消
子元件ok了。

vue中父子元件之間的通訊

父子元件通訊原則 1.父子元件是單向資料流，父元件狀態更新，子元件中prop狀態也會更新，但子元件的狀態變化不會影響父元件。在修改子元件的porp時，console會報錯。原因 防止子元件無意間修改父元件的狀態，避免資料流變得難以理解。如果父元件傳遞給子元件的的狀態時物件 或者 陣列，因為兩者是按引...

vue中父子元件之間的通訊

以前學期vue元件之間通訊的時候，頭痛，感覺好麻煩，結果今天遇到了，躲不掉了，所以今天就查了一下父子組價之間的通訊方法，小小總結一下 首先是，父元件向子元件傳遞變數 即子元件要呼叫父元件中的變數 有如下 在父元件中呼叫子元件，father variable為子元件要呼叫的變數 子元件內 這樣就可以呼...

vue中父子元件之間的通訊

父元件到子元件的通訊主要為 子元件接受使用父元件的資料，這裡的資料報括屬性和方法 string,number,boolean,object,array function vue提倡單項資料流，因此在通常情況下都是父元件傳遞資料給子元件使用，子元件觸發父元件的事件，並傳遞給父元件所需要的引數。父子通訊...