我們的場景是在父元件點選按鈕彈出子元件,子元件裡對資料進行編輯操作以後通知父元件操作完成。彈窗效果是框架自帶的,這裡只說一下元件之間如何傳值。
子元件:dtls.vue
父元件: service.vue
首先父元件要呼叫子元件:import dtls from './dtls.vue' (注意,兩個vue檔案在同乙個資料夾下則前面路徑給 ./ 即可,不在乙個資料夾下的自行科普路徑問題)
匯入以後新增到當前vue的例項裡,如圖:
父頁面呼叫的時候直接使用名稱做的標籤即可:
到此可以訪問到子元件的html了,但是我需要把父元件的資料給子元件,是個物件:
首先我在父元件裡的子元件標籤上定義並賦值乙個變數:
注意,:editobject是我定義的名稱(用於子元件的取值,你可以理解為形參),等號右邊的editobject是我父元件裡的乙個物件,可以理解為實參,就是實際的值,要傳遞給子元件的值,名稱可以不一樣。
到這一步父元件的事就完成了,該子元件接收值了:
在子元件的例項裡通過props來獲取我在父元件傳遞的editobject物件,這個時候,子元件已經取得了editobject的值。注意,此時不必再在子元件裡定義乙個editobject物件,傳遞過來的引數editobject已經是當前子元件的乙個物件了,按正常使用即可,比如我要在子元件的頁面上顯示具體的值:
通過:model就能繫結值,下面訪問的時候,v-model即可:
由於label標籤無法 v-model賦值,所以通過}即可顯示具體字段值。
現在父元件調子元件完成傳值了,輪到子元件完成某個操作反饋資訊給父元件了:
success你可以理解為**函式名,這個是子元件自定義的乙個名稱,$emit方法可以理解為定義乙個**函式名稱,並傳遞乙個實參,可以是任何字串、陣列、或者物件。我這裡只需傳個ok字串。
好了,子元件的事情完成了,剩下的就是父元件對子元件定義的**函式進行監聽。
現在我們回到父元件的頁面上,在dtls標籤上加上事件繫結:v-on:success="success",完整的dtls標籤如下:
最後一步,在父元件裡定義乙個函式,名為success:
同理,父元件裡的函式名可以和子元件不同,等號左邊和右邊應該是分別對應乙個,我這裡沒必要寫成不一樣的,就沒去嘗試了,大家有自己需求的可以試試。
到此整個元件傳值就完成了,從父元件呼叫子元件並傳遞物件,到子元件完成操作以後定義事件,最後父元件對子元件的事件進行監聽。
Vue元件傳值 父子元件傳值
父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...
vue 元件傳值 父子元件傳值,兄弟元件傳值
父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...
Vue元件傳值
學習vue的傳值心得,剛入門vue,大佬勿噴,請多多指教。1.父元件傳值子元件 父元件巢狀子元件式,在標籤裡繫結 子元件用props屬性接收 例 父元件傳值,為縮寫,等同於v bind obj item props obj count 子元件接收傳值,可直接使用,但是推薦在下方重新賦值給新變數再使用...