起因

在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>