當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

vue中的slot插槽

發(fā)布時(shí)間：2023/12/18 vue 31 豆豆

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

1.無(wú)名插槽
<body><div id="app">123</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注冊(cè)組件Vue.component("my-component",{ template:"<span>Hello World!</span>"})new Vue({el:"#app", template:"<my-component>123</my-component>"})</script></body>

結(jié)果顯示的是：Hello World!（組建中寫(xiě)的123并不顯示）

當(dāng)使用插槽時(shí)

<body><div id="app">123</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注冊(cè)組件Vue.component("my-component",{ template:"<span>Hello World!<slot></slot></span>"})new Vue({el:"#app",template:"<my-component>123</my-component>"})</script></body>

結(jié)果顯示的是：Hello World!123（組建中寫(xiě)的123顯示了）

有<slot></slot>插槽的時(shí)候才可以顯示自己組件中寫(xiě)的內(nèi)容。

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">//注冊(cè)組件Vue.component("my-component",{template:`<div><slot name="girl"></slot><slot name="boy"></slot><slot></slot></div>`})new Vue({el:"#app"})</script></body>

顯示結(jié)果：

我是女孩

我是男孩

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">//注冊(cè)組件Vue.component("my-component", {template: `<div><slot hah="hi"></slot></div>`})new Vue({el: "#app"})</script></body>

顯示結(jié)果為：

{ "hah": "hi" }

轉(zhuǎn)載于:https://www.cnblogs.com/150536FBB/p/11362220.html

總結(jié)

以上是生活随笔為你收集整理的vue中的slot插槽的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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