一 匿名插槽
// 语法
Vue.component('MBtn', { template: ` <button> <slot></slot> </button> `, });
使用
<!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"> <App></App> </div> <script> Vue.component('MBtn', { template: ` <button> <slot></slot> </button> `, }); const App = { data() { return { msg: '数据' } },
我们可以使用匿名插槽的名字 也可以像下面那样 但是必须要有 — template: ` <div> <MBtn>登陆</MBtn> <m-btn>注册</m-btn> </div>` }; let app = new Vue({ el: '#app', components: { App } }) </script> </body> </html>