vue- slot and named slots

 

 

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>vue1</title>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
      
        <link rel="stylesheet" type="text/css" href="vue.css">
    
    </head>
    <body>
        
        
        <div id="app">

            <comp :msg="msg">
                <h1 >tongyong</h1>
                <h1 slot=s1>S1slot</h1>
            </comp>
        </div>    
        
        
        <script>
            var comp={


                // in the assembly will be inserted into the slot at slot html 
                // named slot s1 will put the contents of the corresponding slot = s1 of 
                Template: ` < div > 
                    < h1 of > First Line < / h1 of> 
                    < slot name = " s1 " > < / slot> 
                    < h1 of > SECOND Line < / h1 of> 
                    < slot > < / slot> 
                    < h1 of > THIRD Line < / h1 of> 
                    {{MSG}} < / div>`,

            }
            was app = new Vue ({
                el:"#app",
                components:{
                    comp
                }
 
                
            })        
        </script>
    </body>
</html>

 

Guess you like

Origin www.cnblogs.com/JinweiChang/p/12658009.html