vue學習筆記2

2022-08-24 08:18:09 字數 1030 閱讀 5177

1,非父子元件間的傳值

1,非父子元件之間的傳值有兩種方法.方法一:用vuex比較難.方法二:利用bus(匯流排/觀察者模式/發布訂閱模式)

2,bus的使用.

首先vue.prototype.bus= new vue(),意思是給vue的原型物件新增bus屬性,且bus是vue的例項

其次就是如何觸發傳值:this.bus.$emit(事件名,攜帶的引數 )$emit()方法

最後就在元件中利用鉤子函式mounted:function(){}監聽事件,:this.bus.$on(事件名稱,function(){}(監聽到事件後要執行的函式))

2,vue中的插槽

1vue中插槽的作用:插槽用於父元件 向子元件傳遞dom結構.

即在使用自組建的時候在標籤內直接插入dom結構 在子元件中使用就能實現在子元件中插槽.

2,標籤內可以先填寫內容作為沒有插槽傳遞時的預設值.

3,據名插槽,當插槽沒有名字時slot標籤代表所有插入的內容

插槽一插槽二

再子元件使用slot標籤的時候兩個div都會顯示.

據名插槽作用:可以使slot標籤具體使用不同插槽內容

使用:在父元件中

插槽一插槽二

在子元件中

4,據名插槽也可以有預設值當父元件沒有傳遞插槽時顯示預設值

插槽只有乙個據名插槽可以有多個.

3,vue中的作用域插槽

1,作用域插槽的使用場景:子元件迴圈陣列但是顯示的dom結構由父元件決定,此時就需要父元件給子元件傳遞乙個顯示的dom結構

2,使用方式在使用子元件的時候在子元件內插入帶有tamplet標籤的dom模板

例:props內儲存子元件傳遞的資料

}在子元件中使用

使用作用域插槽子元件可以向父元件的插槽傳資料,父元件通過slot-scope來接受傳遞的資料儲存在slot-scope的變數

4,vue中動態元件和v-once

1

Vue學習筆記 2

一 條件渲染 v if 一種依據條件,判斷是否渲染元素的屬性。具有控制元素是否顯示的能力 可與v else if即v else並用,使用方法與其他程式語言中類似。key屬性在v if中的應用 由於vue是惰性的,即載入過一次的相同元件不會重複載入,這對於if條件改變的某些情況會不符合常理。即if與e...

VUE學習筆記2

一 安裝vue腳手架的常用外掛程式 axios 前後端聯調外掛程式 mockjs 模擬後端外掛程式 element ui 元件庫,統一風格的按鈕 彈框等 vuex 狀態管理工具,可理解為管理全域性變數 配置檔案的說明鏈結可參考 實際工程配置時主要關注發布路徑 靜態檔案儲存路徑設定 後端聯調相應配置,...

Vue學習筆記 2

在計算屬性的函式中,不能使用vue建構函式返回的vm變數,因為此時vm還未返回,依然處於vue內部建構函式過程中,遂只能使用this來代替vm。若要使用typescript,可使用以下方法來實現 智慧型感知 vm vm this 另 其他不能用vm變數,只能使用this變數的地方,都可以通過此方法來...