vue插槽slot

經常使用插槽分爲三類：默認插槽，具名插槽，做用域插槽

插槽：子組件的內容往父組件裏面填充，父組件裏面包含的內容會根據插槽的類型填充到對應的slot定義的標籤中

1，常見的vue父子組件引入

//父組件parent.vue
<div class="parent">
    <child></child>//在父組件的child中沒有內容，此時沒有出現插槽
</div>複製代碼

//子組件child.vue
<div class="child">
    <span>fanfanjun</span>
</div>
複製代碼

2，插槽的出現--默認插槽操做

//父組件parent.vue
<div class="parent">
    <child>//在父組件的child中沒有內容，此時沒有出現插槽        <span>fanfanjun1</span>
    </child>
</div>複製代碼

//子組件child.vue
<div class="child">
    <slot></slot>
    <span>fanfanjun2</span>
</div>複製代碼

渲染結果：

//父組件parent.vue
<div class="parent">
    <div class="child">//替換父組件child標籤
        <span>fanfanjun1</span>//默認由父組件child的裏面內容替換
        <span>fanfanjun2</span>
    </div></div>複製代碼

3，具名插槽

//父組件parent.vue
<div class="parent">
    <child>//在父組件的child中沒有內容，此時沒有出現插槽        
        <span>fanfanjun1</span>
        <span slot="content">fanfanjun3</span>
    </child>
</div>複製代碼

//子組件child.vue
<div class="child">
    <slot></slot>
    <slot name="content"></slot>
    <span>fanfanjun2</span>
</div>複製代碼

渲染結果：

//父組件parent.vue
<div class="parent">
    <div class="child">//替換父組件child標籤
        <span>fanfanjun1</span>//默認由父組件child的裏面內容替換
        <span>fanfanjun3</span>//具名插槽替換內容
        <span>fanfanjun2</span>//子組件裏面內容
    </div>
</div>複製代碼

4，做用域插槽

//父組件parent.vue
<div class="parent">
    <child>//在父組件的child中沒有內容，此時沒有出現插槽        
        <span>fanfanjun1</span>
        <span slot="content">fanfanjun3</span>
        <span slot-scope="user" slot="container" v-for="item in user.data">{{item}}</span>
        //v-slot:container="user" or #container="user"
    </child>
</div>複製代碼

//子組件child.vue
<div class="child">
    <slot></slot>
    <slot name="content"></slot>
    <slot name="container" :data="data"></slot>//2.6之後寫法v-bind:user="data"    <span>fanfanjun2</span>
</div>
 export default {
    data: function(){
      return {
        data: [1，2，3]
      }
    },
 }複製代碼

渲染結果：

//父組件parent.vue
<div class="parent">
    <div class="child">//替換父組件child標籤
        <span>fanfanjun1</span>//默認由父組件child的裏面內容替換
        <span>fanfanjun3</span>//具名插槽替換內容
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>fanfanjun2</span>//子組件裏面內容
    </div>
</div>複製代碼