當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue中的slot插槽

發布時間：2023/12/18 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue中的slot插槽小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

轉載于:https://www.cnblogs.com/150536FBB/p/11362220.html

總結

以上是生活随笔為你收集整理的vue中的slot插槽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Jmeter运行过程中如何让Fiddle
下一篇： vue-axios intercepto