An anonymous slot
// 语法
Vue.component('MBtn', { template: ` <button> <slot></slot> </button> `, });
use
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width ,initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> < The App > </ the App > </ div > < Script > Vue.component ( ' MBtn ' , { Template: ` < Button > < slot > < / slot> < / Button> `, }); const the App = { Data () { return { MSG: ' data ' } },
we can use the name slot may be as anonymous but must be as follows - Template: ` <div> <MBtn>登陆</MBtn> <m-btn>注册</m-btn> </div>` }; let app = new Vue({ el: '#app', components: { App } }) </script> </body> </html>