溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue組件中的slot
slot 可以實現在已經定義的組件中添加內容，組件會接收內容并輸出，假如有一個組件person，它的里面包含的是個人信息，如下面這樣
<template id="per">
<div>
<p>姓名:...</p>
<p>年齡:...</p>
<p>職業:...</p>
</div>
</template>
在應用的時候，當然希望這里面可以是靈活變化的，所以這就需要用到slot了
首先要做的事情就是創建這樣一個組件，這里我采用的是<template>的形式，如下面這樣
<template id="per">
<div>
<p>姓名:</p>
<p>年齡:</p>
<p>職業:</p>
</div>
</template>
可以看到我這里給template添加了id，這個是為了后面的操作
下面使用Vue的構造器，創建Vue實例，然后添加局部的組件，如下面這樣
var person = {
template : "#per" //利用id
};
new Vue({
el: "#app",
data: {
componentData: {
name : "vam",
age : 18,
job : "student"
}
},
components : {
"person" : person
}
});
接下來就是要在<person> 組件使用的時候添加點東西，就是具體內容，下面這樣：
<div id="app">
<person>
<span slot="name">{{componentData.name}}</span>
<span slot="age">{{componentData.age}}</span>
<span slot="job">{{componentData.job}}</span>
</person>
</div>
當然這樣還是不夠的，總得在模板中有點什么吧，如下，這里就該用到slot了
<template id="per">
<div>
<p>姓名:<slot name="name"></slot></p>
<p>年齡:<slot name="age"></slot></p>
<p>職業:<slot name="job"></slot></p>
</div>
</template>
之后就可以看到想要的結果了
以上就是Vue.js中組件中的slot實例的講解，大家如果有疑問請留言討論，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
