slot的作用域与后备内容——slotの学习笔记

slot的作用域

官方表述：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

  <div id="app">
		<parent>
            parent的data值：{{heng}}
        </parent>
    </div>

 <script>
        var child = {
        
        template:`
        <div>
            <div>-------------------</div>
            <div>child</div>
            <div>child的slot:（<slot></slot>）</div>
        </div>
        `,
    }
        var parent = {
            data:function(){
                return {huan:"22"}
            },
            template:`
            <div>
                <div>-------------------</div>
                <div>parent</div>
                <div>parent的slot:（<slot></slot>）</div>
                <child>child的data值：{{huan}}</child>
            </div>
            `,
            components:{
                child
            }
        }

        new Vue({
            el:'#app',
            data:{
                heng:11
            },
            components:{
                parent,
            },
            
        })

    </script>

结果：

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染
详细内容链接