slot插槽

slot，就是内容分发的api，意思就是在模版中引用一个组件，这个组件的内容可以有引用组件的地方提供；
基本示例：

<div id="root">
    <div>案例1：slot的基本用法</div>
    <Test>
        <template v-slot:header="{user}">
            <div>自定义header({{user.a}})</div>
        </template>
        <template v-slot="{user}">
            <div>自定义body({{user.b}})</div>
        </template>
    </Test>
</div>
<script>
 Vue.component('Test', {
    template:
        '<div>' +
        '<slot name="header" :user="obj" :section="\'header\'">' +
        '<div>默认header</div>' +
        '</slot>' +
        '<slot :user="obj" :section="\'body\'">默认body</slot>' +
        '</div>',
    data() {
        return {
            obj: { a: 1, b: 2 }
        }
    }
})
new Vue({el:"#root"})
</script>

可以看出，插槽的内容分发只能放在template标签上，并且插槽内是拿不到,当前组件的作用域的，只能访问当前模版的作用域也就是组件的作用域，所以要通过属性传递过去数据，v-slot可以用解构的方法拿到数据，v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。；*
所以请记住一句话
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
####具名插槽
当模版中有多个slot是可以用name属性来给slot起名字，在使用的时候template标签上使用v-slot:name来制定这个内容分发到那个slot里边，如果只写一个v-slot就渲染到默认的slot里边，实际上v-slot=>v-slot:default,这样就会渲染到默认的插槽上；
####动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<div id="root2">
    <div>案例2：Vue2.6新特性 - 动态slot</div>
    <Test>
        <template v-slot:[section]="{section}">
            <div>this is {{section}}</div>
        </template>
    </Test>
    <button @click="change">switch header and body</button>
</div>
<script>
    Vue.component('Test', {
        template:
            '<div>' +
            '<slot name="header" :user="obj" :section="\'header\'">' +
            '<div>默认header</div>' +
            '</slot>' +
            '<slot :user="obj" :section="\'body\'">默认body</slot>' +
            '</div>',
        data() {
            return {
                obj: { a: 1, b: 2 }
            }
        }
    })
	 new Vue({
        el: '#root2',
        data() {
            return {
                section: 'header'
            }
        },
        methods: {
            change() {
                this.section === 'header' ?
                    this.section = 'default' :
                    this.section = 'header'
            }
        }
    })
</script>

上边就是一个动态插槽的例子，当section=header的时候，这时候模版会渲染到header上边所以页面显示this is header /默认body
当点击按钮切换了之后section=body，这时候模版会渲染到body里边，header编程默认的。
####具名插槽的缩写
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header；
然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：
如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：