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變數的地方,都可以通過此方法來...