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>