国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 敢問vue"作用域插槽"的真實應(yīng)用場景有哪些?
阿神
阿神 2017-04-11 12:03:29
0
2
384

在vue官方文檔中看到vue v2.1.0新增作用域插槽,文檔中說明的使用方法和案例我都看明白了,但無法理解該案例的用意:

作用域插槽更具代表性的用例是列表組件,允許組件自定義應(yīng)該如何渲染列表每一項:

<my-awesome-list :items="items">
  <!-- 作用域插槽也可以在這里命名 -->
  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
</my-awesome-list>

列表組件的模板:

<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- fallback content here -->
  </slot>
</ul>

我對這個案例的理解是:子組件從數(shù)據(jù)源中獲取數(shù)據(jù),然后回傳給父組件來做樣式層面的渲染。這跟我的認知有沖突,難道不是應(yīng)該父組件獲取數(shù)據(jù)后,再交給子組件來渲染的嗎?

敢問大家是怎么理解官方給出的這個案例的呢?另外,能否介紹一下在實際項目中對此特性的應(yīng)用場景?

補充:我是明白slot的用意的,我只是不明白為什么既然在slot機制下,slot部分的控制權(quán)已經(jīng)完全交給父組件了,還要提供子組件的屬性供父組件來使用。

阿神
阿神

閉關(guān)修行中......

reply all(2)
黃舟

比如你寫了一個對話框組件,發(fā)布后,你的使用者想自定義標(biāo)題部分的樣式或內(nèi)容,比如顯示很多自己定義的按鈕。
此時,你就需要使用這個功能了。
其實這個功能,就是做到了更靈活。

拋磚引玉吧。

巴扎黑

普通的slot,在parent中訪問不到child的數(shù)據(jù)。Scoped Slots可以。

官方的例子,一個列表,不同的場景有不同的具體展示方式,但數(shù)據(jù)是相同的。這時可以把列表定義成抽象的,類似interface,具體的implement在使用的時候(parent中)確定。

<list-comp>
    <header> title </header>

    <ul>
     <slot name="item" v-for="item in items" :text="item.text">
       <!-- 具體的列表展示形式在parent中使用slot -->
     </slot>
    </ul>

    <footer>other things<footer>
<list-comp>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template