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" }
?
)
