vue初學 3 深入理解vue元件

2022-07-03 06:39:13 字數 1423 閱讀 8876

舉個例子比較能說明問題：

1


vue.component('row',)
如何解決？（is語法）
這樣就解決了這個問題了。

vue.component('counter', }


', data: function() 


},methods: }})


//在兩個子元件用ref引用


//接著在根元件中新增方法來處理資料


handlechange: function()
1）父元件->子元件，通過屬性傳值
//通過v-bind繫結資料


var counter = 


},template: '}


', methods: 


}}var vm = new vue(


})
2）子元件->父元件，通過觸發事件
//在上面的handleclick中加上


this.$emit('change', 1); //後面這個引數是用來傳值的


//在父元件內監聽


//父元件內處理


handlechange: function(step) 


var child = }},


template: '}


' }
之前元件間傳值都是在父子元件（詳見上面），那非父子元件如何傳值呢？一層一層傳未免過於複雜，這裡介紹一種bus方式，這裡要實現：點選其中乙個子元件，另乙個子元件也要變成這個樣子。
從之前的介紹中可知，可以用template來初始化子元件，但如果一切都在template中寫 閱讀性會十分低，有一種方式可以直接在html的子元件標籤內部插入內容，這就是插槽（slot）。使用方法也不難，就直接在下面**裡講：

//html部分


傳進來的header


傳進來的footer


//子元件部分


vue.component('child',)


var vm = new vue()
定義域插槽
//標準格式 就是要用template標籤 加上屬性值設定來獲取子元件傳來的值，這個prop可以隨便設定，只要後面}裡用它即可
動態元件（is）
change
v-once指令（提高**效率）

深入理解vue元件

當使用table select等標籤時，元件標籤化可能會有bug，此時應該使用 is 接受元件。在子元件定義data時，data必須是乙個函式，不能是乙個物件。在vue中如果要操作dom，需要使用 ref 引用，從而獲取dom節點。需求 定義乙個子元件，使其數字自加，在父元件中對子元件的數字求和。單...

Vue元件深入理解 插槽

插槽相當於佔位符，用表示 用於父元件填充子元件的資訊 在中間填充內容，則擋傳入的slot中不存在時，則會使用使用填好的內容。type submit submitslot button 父級元件模板不能編譯子元件的變數，因此需要值傳遞。插槽有點類似於父子元件傳值，但傳的不是值，而是傳進去復用的模板 實...

深入理解Vue元件生命週期

對上圖的理解 個人理解，如有錯誤，歡迎批評指出 建立 掛載 更新 beforecreate 元件初始化，但資料原生觀測 自定義觀測 event watcher 沒生成之前。未完全建立階段 created 元件建立後，但還未掛載完全建立階段 beforemount 元件渲染後，掛載前。渲染後待掛載 m...