Vue2.0五——props和slot

Cymiran發表於2017-12-06
Vue

props

props是用來接收引數的 例如父元件向子元件傳參 可以放在props中

slot

slot：插槽 slot分發模式主要用於在元件中插入標籤或者元件之間的相互巢狀
個人認為如果元件中有需要單獨定義的地方 可以使用slot

單個slot 內容分發 可以選擇用slot標籤事先佔個位置

例子：

現在父元件中佔個位置
   <template id="a">
    <div>hello!</div>
    <slot>沒有內容 就顯示這個</slot>
</template>

var a = Vue.extend({
    template: `#a`
})

子：
<div id="child">
    <A></A>
    <hr/>
    <A>
        <h1>內容1</h1>
        <h1>內容2</h1>
    </A>
</div>
var child = new Vue({
    el: `#child`,
    components: {
        "A":A
    }
})
結果：
    hello!
    沒有內容 就顯示這個
    
    hello!
    內容1
    內容2

具名Slot

<template id="b">
    <slot name="slot1"></slot>
    <slot></slot>
    <slot name="slot2"></slot>
</template>

var B = Vue.extend({
    template: "#b"
});

<div id="child2">
    <B>
        <div slot="slot1">this is slot01</div>
        <div slot="slot2">this is slot02</div>
        <div>aaa</div>
        <div>bbb</div>
    </B>
</div>   

var child2 = new Vue({
    el: "#child2",
    components: {
        "B": B
    }
});

結果：
    this is slot01
    aaa
    bbb
    this is slot02

作用域插槽 用來傳參

子=> 父

子：
<slot name="b" :msg="hello"></slot>

父：
<template slot="b" **slot-scope**="props">
    <child>
        <div class="">
           {{props.msg}}
        </div>
    </child>
</template>

作用域插槽更典型的用例是在列表元件中，允許使用者自定義如何渲染列表的每一項：

<mylist :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <li
    slot="item"
    slot-scope="props"
    class="my-fancy-item">
    {{ props.text }}
  </li>
</mylist>
列表元件的模板：
<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- 這裡寫入備用內容 -->
  </slot>
</ul>

相關文章