vue插槽--slot

vue插槽--slot，在很多三方的UI框架里大量的使用了插槽，像现在用的比较多的饿了么的ElementUI

在这里有自己写的一个组件<center></center>，组件有一个title，在使用组件的时候要求肯定要显示这个title,也就是说这个title是静态的内容，和数据无关，是组件<center></center>里直接写dom结构，就必须要用插槽来正常显示，当然也可以放到属性里绑定,用v-html显示，但是不易于阅读

    <div id="app">
        <div class="container">
            <center class="center-box">
                <h1>this is a title</h1>
            </center>
        </div>
    </div>

    <script>
        Vue.component('center',{
            data() {
                return {
                    text: 'this is you component context.'
                }
            },
            template: `<div>
                            <slot></slot> //相当于<h1>this is a title</h1>
                            <div>{{text}}</div>
                        </div>`
        })

        //根实例
        var vm = new Vue({
            el: '#app'

        })
    </script>

插槽的用处很多，具名插槽，作用域插槽，有兴趣的可以自己查阅资料，这里不讲了（懒。。）