vue <slot></slot> 插槽用于展现使用模板时候 内部的内容

起因

在vue组件使用的过程中，出现在模板的内部的内容会被默认替换，比如下面的例子

	<div id="app4">
        <temp1>在模板使用的时候内部写的内容</temp1>
    </div>
    <script>
        Vue.component('temp1',{
            data:function(){
                return{
                    itdoesntmatter:0
                }
            },
            template:'<div>模板定义的时候内部的内容</div>'
        })

        var app4 = new Vue({
            el:"#app4"
        })
    </script>

上面的代码在渲染的时候就只会渲染出在"模板定义的时候内部的内容"，在模板使用的时候内部的内容会被覆盖忽略。
假如我们想要在使用模板的时候内部的内容不要被清除，而是放置在某个位置的话，我们就得在模板里面添加一个插槽
顾名思义，在模板里留着这么一个地方好把在使用模板的时候模板内部的东西插进去，请看下面的例子：

    <div id="app3">
        <templ>你好</templ>
    </div>

    Vue.component('templ',{
        data:function(){
            return {
                value:0
            }
        },
        template:`

        <div class="list">额这里是组件的内容<slot>这里的内容不会出现在渲染之后的元素中所以我可以随便乱写23333</slot></div>
        `
    })

    var appx = new Vue({
        el:'#app3'
    })

上面的情形经过渲染之后会在页面上渲染出

<div id="app3">
	<div class="list">额这里是组件的内容你好</div>
</div>

模板文件中出现的一长串的内容并不会渲染，而是将"你好"这个在模板使用的时候的内容“插”在了模板中出现的位置

插值()可以让模板里面渲染另外一个模板例如：

    <div id="app5">
        <tem1>
            <tem1-child></tem1-child>
        </tem1>
    </div>

   Vue.component('tem1-child',{
        data:function(){
            return{
                value:1
            }
        },
        template:'<div>can u see me?</div>'
    })
    Vue.component('tem1',{
        data:function(){
            return {
                value:0
            }
        },
        template:'<p>parent</p>'
    })
    var app5 = new Vue({
        el:"#app5"
    })

这样渲染出来之后，只会渲染父组件的部分：

<p>text1</p>

而如果在父组件里加了<slot></slot>组件在使用的时候内部就可以放进另外一个组件，在此处是子组件
稍稍修改一下父组件的内容：

···
Vue.component('tem1',{
    data:function(){
        return {
            value:0
        }
    },
    template:'<p>parent,any Content? ：<slot></slot></p>'
})
···

这样就能将一个模板内部的元素渲染出来了
渲染之后的样子：

<p>parent,any Content? ：<div>can u see me?</div></p>