插槽（模块嵌套模块）

利用Slot插槽显式的替换掉组件内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插槽</title>
        <script src="vue.js"></script>
    </head>
    <body>
        
        
              
        <!-- 使用组件时，显式的替换掉组件中的某块内容,下面示例替换掉弹窗的标题 -->
              
        <div id="app">
            
            <pop-ups>
                <span slot="title">替换原有弹窗标题</span>
            </pop-ups>
            
        </div>
        
        <script>
            
            Vue.component('pop-ups',{

                template:'<div><p><slot name="title">弹窗标题</slot></p><p><slot name="text">默认弹窗内容</slot></p></div>'
            })
            
            new Vue({el:'#app'})
            
        </script>
        
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容