vue(三)之組件

在這裏插入圖片描述
ES6開始可以使用“Tab”健上面的點健來聲明字符串,這樣的好處是可以直接換行而不需要使用+號
使用組件必須需要放到vue的實例裏面(一般是在div中)

全局組件與局部組件

直接在new vue裏面註冊的組件則是局部組件只能在當前的vue實例裏面使用
在這裏插入圖片描述

父子組件

在一個父組件中註冊另一個組件,然後就可以在父組件內部使用被註冊的組件
在這裏插入圖片描述

註冊組件的語法糖寫法

全局註冊
在這裏插入圖片描述
局部註冊
在這裏插入圖片描述

組件模板的抽離寫法

方式一
在這裏插入圖片描述
方式二
在這裏插入圖片描述
組件不能訪問vue實例裏的數據,組件自己可以有數據
在這裏插入圖片描述
在這裏插入圖片描述

父子組件的通信

在這裏插入圖片描述
props的使用
在這裏插入圖片描述
在這裏插入圖片描述
props數據驗證
在這裏插入圖片描述
props駝峯標誌,在使用的時候必須轉爲下劃線
在這裏插入圖片描述
在這裏插入圖片描述

子級向父級傳遞

子模板觸發事件
在這裏插入圖片描述
在組件的methods將內容emit出去
在這裏插入圖片描述
傳入會父組件
在這裏插入圖片描述
在父組件的methods中再進行處理
在這裏插入圖片描述
通過$children拿到子組件的內容,但是一般不這麼用
在這裏插入圖片描述

通過$ref拿到子組件的內容,這種方式使用較多
這種方式使用前需要指定內容
在這裏插入圖片描述
接着才能在父組件中獲得
在這裏插入圖片描述

通過$parent拿到父組件的內容,但基本不用,通過通過root訪問根組件,也用的很少
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章