簡述vue中父子元件是怎樣相互傳遞值的(基礎向)
前言
首先,你需要知道vue中父元件和子元件分別指的是什麼?
父元件:vue的根例項——用new Vue()建構函式建立的vue例項(例項會有一個掛載點,掛載點裡的所有內容可理解為父元件的內容)
這裡以root為掛載點,root裡包含的所有內容可稱為模板,即我們常說的父元件
子元件:用Vue.component()註冊的元件(下圖todo-item就是元件的名稱,該名稱可自定義,推薦使用短橫線分隔命名)
定義元件名的2種方式(截圖截自vue官網)
注:建議在html中引用元件時(非字串模板),元件命名都用短橫線命名且字母全小寫的方式
父元件向子元件傳遞值
父元件:通過屬性的形式進行傳遞(比如v-bind:content="item" ,通過v-bind屬性把item的值動態賦給content變數)
子元件:通過props接收父元件傳遞的值
子元件向父元件傳遞值
子元件:通過$emit()方法釋出事件廣播
父元件:捕獲到子元件向外觸發的事件,然後可執行相應的方法
下圖為子元件通過$emit()方法向外傳遞delete事件,父元件捕獲到delete事件後執行handleDelete()方法
下圖中methods方法裡的this預設指向vue例項
不要把methods方法寫成箭頭函式,因為箭頭函式會改變this的指向,使this不在預設指向vue例項,而指向undefined
同時vue例項中的data,computed,watch屬性也都不要寫成箭頭函式,理由同上
注:@delete="handleDelete"為v-on:click="handleDelete"的簡寫;
:content="item"為v-bind:content="item"的簡寫
補充:怎麼註冊全域性元件和區域性元件
①:註冊全域性元件(用Vue.component(),元件名為todo-item,可自定義,推薦使用短橫線分隔命名)
②:註冊區域性元件(通過一個 JavaScript 物件來定義元件)
註冊區域性元件後,直接引用元件<todo-item></todo-item>會報錯,提示未註冊該元件
解決方法是在vue例項中用components進行宣告
注:對於components物件中的每個屬性來說,其屬性名就是自定義元素的名字,其屬性值就是這個元件的選項