<!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={ //在組件中插入html會放到slot插槽處 //具名插槽s1會放相應的slot=s1的內容 template:`<div> <h1>first line</h1> <slot name="s1"></slot> <h1>second line</h1> <slot ></slot> <h1>third line</h1> {{msg}}</div>`, } var app=new Vue({ el:"#app", components:{ comp } }) </script> </body> </html>
作用域插槽
<!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 > //組件的值傳到html中，要包在template中， <template slot-scope="data"> <div>{{data.msg}}</div> </template> </comp> </div> <script> var comp={ //作用域插槽 template:`<div> <slot :msg=msg></slot> </div>`, data(){ return{ msg:"ssss" } } } var app=new Vue({ el:"#app", components:{ comp } }) </script> </body> </html>