vue21 slot占位
阿新 • • 發佈：2017-06-10
slot component char charset one var nts 位置 log
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <!--slot: 位置、槽口 作用: 占個位置 類似ng裏面 transclude （指令）--> <div id="box"> <aaa> <ul> <!--出不來--> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </aaa> </div> <script> varvm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{ ‘aaa‘:{ template:‘<h1>xxxx</h1>‘ } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <aaa> <ul> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </aaa> </div> <template id="aaa"> <h1>xxxx</h1> <slot>這是默認的情況</slot> <!--ul出來了--> <p>welcome vue</p> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{ ‘aaa‘:{//標簽名 template:‘#aaa‘//模版位置 } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <aaa> <ul slot="ul-slot"> <li>1111</li> <li>2222</li> <li>3333</li> </ul> <ol slot="ol-slot"> <li>111</li> <li>222</li> <li>333</li> </ol> </aaa> <hr> <aaa> </aaa> </div> <template id="aaa"> <h1>xxxx</h1> <slot name="ol-slot">這是默認的情況</slot> <p>welcome vue</p> <slot name="ul-slot">這是默認的情況2</slot> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{ ‘aaa‘:{ template:‘#aaa‘ } } }); </script> </body> </html>
vue21 slot占位