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

資訊專欄INFORMATION COLUMN

Vue組件之props,$emit與$on以及slot分發

levy9527 / 1331人閱讀

摘要：組件實例之間的作用域是孤立存在，要讓它們之間的信息互通，就必須采用組件的通信方式用于父組件向子組件傳達信息靜態方式以數組的形式發出自己所需要的信息至于父親給不給，就由父親說了算，父作用域給予回應，將回應回去，兒子得到自己想要的，然后展

組件實例之間的作用域是孤立存在，要讓它們之間的信息互通，就必須采用組件的通信方式

props用于父組件向子組件傳達信息

1.靜態方式

eg:

props以數組的形式發出自己所需要的信息(至于父親給不給，就由父親說了算)，父作用域給予回應，將message=‘hello’回應回去，兒子得到自己想要的，然后展現在html結構中;

2.動態獲取數據

子組件要得到父親口袋里面的東西（實例里面的數據），必須通過v-bind類似于綁定結構屬性的方式發送給子組件；

eg:

渲染結果為：


   

     
zhangsan---name---0

     
man---sex---1

     
science---job---2

注意：在組件里面用v-for一定要寫個外層標簽包著v-for，因為大哥只能有一個，不能寫并行標簽

當然也可以傳遞方法給子組件

如果傳遞過來的方法中帶有父組件里面的屬性，也可以用

eg:

彈出框顯示hello, world

由此我們可以得出：父組件傳遞給子組件的是一個引用地址，但是這個引用是單向的，只能父組件改變的時候子組件獲得的信息也會發生變化，但是子組件不可以去更改父組件傳遞過來的值，但是可以去加工

eg:

彈出框顯示：hello,world i am god

eg:

顯示結果：

1.gif

props可以用來規定自己需要的數據類型，此時props將需求以對象的形式呈現，兒子開始挑剔了，但是父親給他的不符合要求時候，它便會報錯，但是畢竟是父親給的，所以還是會渲染出來

eg：





顯示結果：

blob.png

關于兒子組件的具體挑剔要求，我直接引個官網文檔，就不做過多說明了

Vue.component("example", {
props: {

// 基礎類型檢測 (`null` 意思是任何類型都可以)
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
  type: String,
  required: true
},
// 數字，有默認值
propD: {
  type: Number,
  default: 100
},
// 數組/對象的默認值應當由一個工廠函數返回
propE: {
  type: Object,
  default: function () {
    return { message: "hello" }
  }
},
// 自定義驗證函數
propF: {
  validator: function (value) {
    return value > 10
  }
}

}
})

$emit與$on，關于這一對兄弟，接觸過angular.js和react的應該都很熟悉，$emit是發射的意思，$on 為監聽，主要用于子組件向父組件傳遞信號，當然，兒子廣播出去，父親聽不聽就是父親的事情了

eg:


{{a}}



顯示如下：

1.gif

父親在監控ok,每當聽到兒子通過$emit發送過來ok時候，父親就開始執行自己的add方法

當然兒子也可以向父親傳遞信息過去

eg:


{{a}}



顯示效果：

1.gif

兒子將自己的i值傳遞給父親，父親通過接收到的i值將自己的a值更改

監聽原生事件的時候，父親只需要在自己的監聽器上加一個炫酷特效.native,兒子不需要去發廣播，父親就會知道，也就是說有些事情只要老爸愿意了解，不需要兒子去告訴，他自己也可以選擇知道

eg:


{{a}}



顯示結果：

1.gif

除了父子直接可以互相通信外，子組件直接互相通信，需要一個子組件先將信息傳遞給父組件，父組件再交給另一個子組件

eg:


我是父親且a為：{{a}}




顯示結果為：

slot分發模式主要用于在組件中間插入標簽或者組件之間的相互嵌套

單個內容插入，可以選擇用slot標簽事先占個位置

eg:



slot分發


渲染結果為：

  
我就是：slot分發

也就是說slot類似于一個插槽，提前站好一個位置，要插入組件中的標簽類似于卡，插入提前站好位置的插槽中

多個標簽插入，就需要按照名字一一對號入座

eg:



    
我是1號卡片

    
我是2號卡片

    
我是3號卡片




渲染結果為：

作用域插槽還是有點抽象的，也就是子組件充當插槽，父組件將內容插在子組件上面，并且子組件將值傳遞給父組件，父組件用scope="props"來接收子組件傳過來的值





渲染結果為：

eg:







渲染結果：

動態組件通過component來動態切換組件的內容

eg:




渲染結果為：

帶圖原文地址http://www.cnblogs.com/douyae...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88930.html

相關文章

  • Vue-組件詳解

    摘要：除了監聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用。將和合并成，會自動去判斷是普通標簽還是組件。子組件這里的狀態綁定的是父組件的數據。 查看原文站點，更多擴展內容及更佳閱讀體驗！ 組件詳解 組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-com...

    dadong 評論0 收藏0

  • Vue.js-組件詳解

    摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。 學習筆記：組件詳解 組件詳解 組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

    jeffrey_up 評論0 收藏0

  • Vue.js非常重要之組件

    摘要：它們之間必然需要相互通信父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這是由使用的父組件決定的。 Vue.js的組件 注冊組件 全局注冊 要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

    ysl_unh 評論0 收藏0

  • Vue 的組件

    摘要：組件上一篇的表單輸入綁定使用組件注冊組件首先我們要創建一個實例要注冊一個全局組件，你可以使用。使用傳遞數據組件實例的作用域是孤立的。這意味著不能也不應該在子組件的模板內直接引用父組件的數據。 組件 上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11... 使用組件 注冊組件 首先我們要創建一個實例： new Vue({ el:.exp, ...

    kk_miles 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<