手挽手帶你學(xué)VUE：二檔組件開發(fā)以及常用全局api

Pink 發(fā)布于2019-08-23 14:28 / 894人閱讀

摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調(diào)用，但是可能發(fā)生在其子更新之前。指令所在組件的及其子全部更新后調(diào)用。

視頻教程 由于思否不支持視頻鏈接視頻請移步 http://www.henrongyi.top 你能學(xué)到什么

二檔視頻當(dāng)然要比一檔視頻難一點，如果前面的內(nèi)容還沒有消化完畢的話，還是建議大家繼續(xù)消化前面的內(nèi)容，然后再看接下來的部分。這一部分是VUE的核心，講到組件化開發(fā)的基礎(chǔ)部分，多學(xué)，多練。

生命周期

Vue官網(wǎng)給出的生命周期圖

這里大家也可以看到，我們在 app內(nèi)部只引用了 shuaiQm這一個組件， shuaiQm又包含他的子組件 childer，因此父子都被渲染出來了。這就是父子組件的寫法。

插槽slot

這時候又有朋友要問了，如果我想在組件里面繼續(xù)書寫html怎么辦呢？ slot插槽就是個很好的東西了，這里我用代碼給大家演示一下slot插槽的用法。




    
    
    
    Document





    
    {{message}}
       
           hello world

插槽只有這一個作用嗎？不，那你就太小看插槽了，接下來要介紹一下插槽的作用域插槽用法。

作用域插槽，聽不懂可跳過,后面還會詳細(xì)講解

使用時候子組件標(biāo)簽Child中要有 template scope=”scopeName” 標(biāo)簽，再通過scopeName.childProp就可以調(diào)用子組件模板中的childProp綁定的數(shù)據(jù)，所以作用域插槽是一種子傳父傳參的方式，解決了普通slot在parent中無法訪問child數(shù)據(jù)的去問題；
這么說太復(fù)雜了，直接上個例子顯而易見。
如果這里聽不懂可以暫時跳過，只需要會用slot插槽的基礎(chǔ)用法即可，在后面講Element項目的時候，我會結(jié)合實例給大家講解這個作用域插槽。




    
    
    
    Document





    
    {{message}}

prop 傳遞參數(shù)給組件（父傳值給子）

講到這里，已經(jīng)到了VUE一個需要理解的地方了，父子傳值，我們先講解一下，如何將值傳遞給子組件，這個整體來說還是比較簡單。引用我們的組件的標(biāo)簽上寫上屬性，并且把參數(shù)傳入，這樣我們在組件內(nèi)部使用props就可以獲得傳過來的值了，我們還是以上面的代碼為例。




    
    
    
    Document

這一段代碼注意，再給html上面添加屬性的時候，我們是不可以直接添加駝峰命名的，因為html不會區(qū)分大小寫，所以我們建議屬性的命名方式是完全小寫或者橫線命名的方式。如果我們使用橫線命名來傳遞參數(shù)的話，在接收的時候，橫線后面的首字母大寫，變成小駝峰來接受，否則使用的時候它會被渲染成NaN,這是為什么呢？別忘了我們一檔講過的，在插值表達(dá)式內(nèi)，是支持簡單計算的，- 會被當(dāng)作減號處理，這里我會在視頻中給大家詳細(xì)講解。

子組件傳值給父組件

學(xué)到這里，如果大家已經(jīng)有些迷茫，現(xiàn)在請先停下，喘口氣，這里難度已經(jīng)慢慢加大。我也會放慢講解的速度。
如果我們想要獲取到子組件內(nèi)部的值，該怎么辦呢？有什么辦法能夠讓我們回去到內(nèi)部的值呢？在這里，先給大家插播一個JS寫法，我覺得這有助于理解子傳父值。

function thief (gold) {
    console.log(gold)
}

function richMan (){
    var money = 1000086
    thief(money)
}

richMan()

我們想要在vue中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。我在代碼中為大家書寫一下




    
    
    
    Document





    
      {{qmGold}}

這樣你理解子傳參給父了嗎？

其余會用到的全局API

Vue.directivet
Vue.directive 我們用來編寫全局指令，它也有自己的生命周期

// 注冊
Vue.directive("my-directive", {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

/*
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

接下來我們來看一下鉤子函數(shù)的參數(shù) (即 el、binding、vnode 和 oldVnode)。

在這些鉤子函數(shù)內(nèi)部，都可以接受三個參數(shù)，我們來看看文檔中的寫法。
el：指令所綁定的元素，可以用來直接操作 DOM 。

binding：一個對象，包含以下屬性：
    name：指令名，不包括 v- 前綴。
    value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
    oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
    expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
    arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
    modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。
oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

這里我會在視頻中結(jié)合官方樣例講解
*/

上面我們羅列了這么多它的特性，不過真正開發(fā)中，我們最常用的只有 bind 和 update 這兩個時期
我們可以簡寫為

    Vue.directive("color", function (el, binding) {
        el.style.backgroundColor = binding.value
    })

下面我們來舉個例子




    
    
    
    Document





    
      
          我來測試測試directive

好了我們可以看到加上v-color的這個div內(nèi)部的文字變紅了

Vue.set

Vue.set官網(wǎng)給出的用法是 Vue.set( target, key, value ) 向響應(yīng)式對象中添加一個屬性，并確保這個新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性
這么聽起來是有些籠統(tǒng)的，我給大家用代碼展示一下它在我們?nèi)粘ｉ_發(fā)中經(jīng)常出現(xiàn)的場景。




    
    
    
    Document



    
      
        {{item.hello}}

在上述代碼中，我們通過this.list[0]直接修改了數(shù)組中的第0項目對象，那么視圖是沒有更新的，但是數(shù)據(jù)確實變更了，這是為什么呢？因為Vue是通過Object.defineProperty()來進(jìn)行數(shù)據(jù)的監(jiān)聽，它的機(jī)制導(dǎo)致了它無法直接檢測出數(shù)組中這種情況的變化。這時候我們就需要使用Vue.set了




    
    
    
    Document



    
      
        {{item.hello}}




    
    
    
    Document



    
      
        {{item.hello}}

看是不是強(qiáng)制將它改變了呢？有了Vue.set 數(shù)據(jù)就都不再得瑟了

云服務(wù)器 GPU云服務(wù)器帶你學(xué)c帶你飛 vue組件開發(fā) vue組件 vue父子組件通訊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100661.html

發(fā)表評論

登陸后可評論

0條評論

Pink

男|高級講師

我要關(guān)注我要私信

TA的文章

C 語言是“最環(huán)保”的編程語言

閱讀 1519·2021-11-24 09:38
北上廣深杭房價高壓下，這也許是程序員扎根的唯一出路...

閱讀 3372·2021-11-18 10:02
什么是虛擬主機(jī)技術(shù)-什么是虛擬主機(jī)？

閱讀 3259·2021-09-22 15:29
買主機(jī)和買服務(wù)器有什么不同-服務(wù)器與虛擬主機(jī)有什么區(qū)別？

閱讀 2942·2021-09-22 15:15
PIGYun：中秋特惠，香港、韓國CN2+BGP線路，大帶寬，月付14元起

閱讀 1043·2021-09-13 10:25
旅途云：4核/4G/50G硬盤/10Mbps不限流量/100G防御/四川雅安/月付120元

閱讀 1850·2021-08-17 10:13
UCloud夏季促銷來襲，全球31個數(shù)據(jù)中心云服務(wù)器大放價低至59元/年

閱讀 1989·2021-08-04 11:13
CSS小技巧（二）：布局

閱讀 1978·2019-08-30 15:54

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

手挽手帶你學(xué)VUE：二檔組件開發(fā)以及常用全局api

相關(guān)文章