1.无名插槽
<body><div id="app">123</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component",{ template:"<span>Hello World!</span>"})new Vue({el:"#app", template:"<my-component>123</my-component>"})</script></body>
结果显示的是：Hello World!（组建中写的123并不显示）
当使用插槽时
<body><div id="app">123</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component",{ template:"<span>Hello World!<slot></slot></span>"})new Vue({el:"#app",template:"<my-component>123</my-component>"})</script></body>
结果显示的是：Hello World!123（组建中写的123显示了）
有<slot></slot>插槽的时候才可以显示自己组件中写的内容。
2.具名插槽
<body><div id="app"><my-component><h1 slot="girl">我是女孩</h1><h1 slot="boy">我是男孩</h1><span slot>123</span></my-component></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component",{template:`<div><slot name="girl"></slot><slot name="boy"></slot><slot></slot></div>`})new Vue({el:"#app"})</script></body>
显示结果：
我是女孩
我是男孩
123
3.作用域插槽
<body><div id="app"><my-component><template slot-scope="a">{{a}}</template></my-component></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component", {template: `<div><slot hah="hi"></slot></div>`})new Vue({el: "#app"})</script></body>
显示结果为：
{ "hah": "hi" }
)
