<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <cpn> <!-- 插槽-插入 --> <!-- 注意，由于编译作用域的概念，这里是在#app的作用域，所以这里showIt使用的是app实例对象的属性 --> <span slot="center" v-show="showIt"> 你好 </span> </cpn> </div> <template id="cpn"> <div> <span>左边</span> <!-- slot：插槽 name="center"给插槽具名 --> <slot name="center"> <!-- 插槽默认值 --> <span>中间</span> </slot> <span>右边</span> </div> </template> <script> // 组件的插槽： // 组件的插槽也是为了让我们封装的组件更具扩展性 // 让使用者可以决定组件内部的一些内容到底显示什么 const app = new Vue({ el: "#app", data: { message: '你好啊', showIt: 1 }, /*注册组件*/ components:{ cpn: { template: '#cpn', } }, }) </script> </body> </html>