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實例的講解，大家如果有疑問請留言討論，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
