vue 插槽solt的使用

1.什么是插槽？

　　插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

2.插槽使用场景

　比如有五个页面，这五个页面只有某个区域的内容不一样，复制粘贴是一种办法，但在vue中，插槽（solt）更好的做法。

3.插槽分类

1)默认插槽：默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。

父组件：

<template>
    <div>
        <solt-child title="默认插槽">
            <template><span>默认插槽测试</span></template>
        </solt-child>
    </div>
</template>
<script>
import SoltChild from "./SoltChild.vue"
export default {
    components:{
        "solt-child":SoltChild,
    }
}
</script>

子组件：

<template>
    <div>
        <span style="color:red">{{title}}</span>
        <slot></slot>
    </div>
</template>
<script>
export default {
    props:['title']
}
</script>

结果：

2）具名插槽：就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

注：v-solt只能在template标签内使用（2.6.0版本以后才有v-solt），也可用solt,在普通html标签内使用，用法：<span slot="right">右边</span>

父组件：

<template>
    <div>
        <solt-child title="具名插槽">
            <template v-slot:right>
                右边
            </template>
            <template v-slot:left>
                左边
            </template>
        </solt-child>
    </div>
</template>
<script>
import SoltChild from "./SoltChild.vue"
export default {
    components:{
        "solt-child":SoltChild,
    }
}
</script>

子组件：

<template>
    <div>
        <slot name="left"></slot>
        <span style="color:red">{{title}}</span>
        <slot name="right"></slot>
    </div>
</template>
<script>
export default {
    props:['title']
}
</script>

结果：

3）作用域插槽：作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

    使用场景：如果子组件中的某一部分的数据，每个父组件都会有自己的一套对该数据的不同的呈现方式，这时就需要用到作用域插槽。

父组件：

<template>
    <div>
        <solt-child title="作用域插槽">
 <!--<span slot="down" slot-scope="a">{{a.user.name}}</span>第一种写法-->
           <template v-slot:down="soltProps" >
                {{soltProps.user.name}}
            </template>
        </solt-child>
    </div>
</template>
<script>
import SoltChild from "./SoltChild.vue"
export default {
    components:{
        "solt-child":SoltChild,
    }
}
</script>

 

子组件：

<template>
    <div>
        <span style="color:red">{{title}}</span>
        <div>
            <slot name="down" :user="user"></slot>
        </div>
    </div>
</template>
<script>
export default {
    props:['title'],
    data(){
        return{
            user:{
                name:"张三",
                age:"18"
             }
        }
       
    }
}
</script>