前言

首先，你需要知道vue中父組件和子組件分別指的是什么？

父組件：vue的根實例——用new Vue()構(gòu)造函數(shù)創(chuàng)建的vue實例（實例會有一個掛載點，掛載點里的所有內(nèi)容可理解為父組件的內(nèi)容）

這里以root為掛載點，root里包含的所有內(nèi)容可稱為模板，即我們常說的父組件

子組件：用Vue.component()注冊的組件（下圖todo-item就是組件的名稱，該名稱可自定義，推薦使用短橫線分隔命名）

定義組件名的2種方式（截圖截自vue官網(wǎng)）

注：建議在html中引用組件時（非字符串模板），組件命名都用短橫線命名且字母全小寫的方式

父組件向子組件傳遞值

父組件：通過屬性的形式進行傳遞（比如v-bind:content="item"，通過v-bind屬性把item的值動態(tài)賦給content變量）

子組件：通過props接收父組件傳遞的值

子組件向父組件傳遞值

子組件：通過$emit()方法發(fā)布事件廣播

父組件：捕獲到子組件向外觸發(fā)的事件，然后可執(zhí)行相應(yīng)的方法

下圖為子組件通過$emit()方法向外傳遞delete事件，父組件捕獲到delete事件后執(zhí)行handleDelete()方法

下圖中methods方法里的this默認指向vue實例

不要把methods方法寫成箭頭函數(shù)，因為箭頭函數(shù)會改變this的指向，使this不在默認指向vue實例，而指向undefined

同時vue實例中的data，computed，watch屬性也都不要寫成箭頭函數(shù)，理由同上

注：@delete="handleDelete"為v-on:click="handleDelete"的簡寫；

:content="item"為v-bind:content="item"的簡寫

補充：怎么注冊全局組件和局部組件

①：注冊全局組件（用Vue.component()，組件名為todo-item，可自定義，推薦使用短橫線分隔命名）

②：注冊局部組件（通過一個 JavaScript 對象來定義組件）

注冊局部組件后，直接引用組件<todo-item></todo-item>會報錯，提示未注冊該組件

解決方法是在vue實例中用components進行聲明

注：對于components對象中的每個屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個組件的選項對象

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論