Vue.js中組件中的slot實例詳解
更新時間：2017年07月17日 14:18:14 作者：Dear_Mr
這篇文章主要介紹了Vue.js中組件中的slot實例詳解的相關(guān)資料,需要的朋友可以參考下
Vue組件中的slot
slot 可以實現(xiàn)在已經(jīng)定義的組件中添加內(nèi)容，組件會接收內(nèi)容并輸出，假如有一個組件person，它的里面包含的是個人信息，如下面這樣
<template id="per">
<div>
<p>姓名:...</p>
<p>年齡:...</p>
<p>職業(yè):...</p>
</div>
</template>
在應(yīng)用的時候，當(dāng)然希望這里面可以是靈活變化的，所以這就需要用到slot了
首先要做的事情就是創(chuàng)建這樣一個組件，這里我采用的是<template>的形式，如下面這樣
<template id="per">
<div>
<p>姓名:</p>
<p>年齡:</p>
<p>職業(yè):</p>
</div>
</template>
可以看到我這里給template添加了id，這個是為了后面的操作
下面使用Vue的構(gòu)造器，創(chuàng)建Vue實例，然后添加局部的組件，如下面這樣
var person = {
template : "#per" //利用id
};
new Vue({
el: "#app",
data: {
componentData: {
name : "vam",
age : 18,
job : "student"
}
},
components : {
"person" : person
}
});
接下來就是要在<person> 組件使用的時候添加點東西，就是具體內(nèi)容，下面這樣：
<div id="app">
<person>
<span slot="name">{{componentData.name}}</span>
<span slot="age">{{componentData.age}}</span>
<span slot="job">{{componentData.job}}</span>
</person>
</div>
當(dāng)然這樣還是不夠的，總得在模板中有點什么吧，如下，這里就該用到slot了
<template id="per">
<div>
<p>姓名:<slot name="name"></slot></p>
<p>年齡:<slot name="age"></slot></p>
<p>職業(yè):<slot name="job"></slot></p>
</div>
</template>
之后就可以看到想要的結(jié)果了
以上就是Vue.js中組件中的slot實例的講解，大家如果有疑問請留言討論，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
Vue3中使用defineCustomElement 定義組件詳解
這篇文章主要為大家介紹了Vue3中使用defineCustomElement 定義組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
Vue導(dǎo)入Echarts實現(xiàn)折線散點圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實現(xiàn)折線散點圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了TypeScript踩坑之TS7053的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了使用props傳值時無法在mounted處理的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目中路由跳轉(zhuǎn)頁面不變問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue+ts實現(xiàn)元素鼠標(biāo)拖動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue?展示.md文件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03