2018年11月10日 關於Vue的混合mixins and 插槽slots
阿新 • • 發佈：2018-11-12
1、混合mixins
//在html中的相關程式碼
<div id="app">
<popup></popup>
<tooltip></tooltip>
</div>
//在Vue.js的相關程式碼 Vue.component('tooltip',{ template:` <div> <span @mouseenter="visible = true" @mouseleave="visible = false">NQY</span> <div v-if="visible"> <h4>你好啊</h4> how are you ? i am fine ,thank you , and you? </div> </div> `, data:function () { return{ visible:false, } } }); Vue.component('popup',{ template:` <div> <button @click="toggle">點選我</button> <div v-if="visible"> <h4>title</h4> how are you ? i am fine ,thank you , and you? </div> </div>`, methods:{ toggle:function () { this.visible = !this.visible; } }, data:function () { return{ visible:false, } } }); var app= new Vue({ el:'#app', })
在我們使用了混合mixins的方法之後，就可以將一些功能方法定義為元件，這樣就可以重複呼叫了。
//在Vue.js的相關程式碼 var base = { methods:{ toggle:function () { this.visible = !this.visible; }, show:function () { this.visible = true } , hide:function () { this.visible = false } }, data:function () { return{ visible:false, } }, misins:[base], }; Vue.component('tooltip',{ template:` <div> <span @mouseenter="show" @mouseleave="hide">NQY</span> <div v-if="visible"> <h4>你好啊</h4> how are you ? i am fine ,thank you , and you? </div> </div> `, mixins:[base], }); Vue.component('popup',{ template:` <div> <button @click="toggle">點選我</button> <div v-if="visible"> <span @click="hide">X</span> <h4>title</h4> how are you ? i am fine ,thank you , and you? </div> </div>`, methods:{ toggle:function () { this.visible = !this.visible; }, hide:function () { this.visible = false; } }, data:function () { return{ visible:false, } } }); var app= new Vue({ el:'#app', })
2、插槽 slots
<style type="text/css"> .panel{ max-width:300px; border:1px solid #999; margin-bottom: 15px; } .panel>*{ padding: 15px; } .panel .title{ border-bottom:1px solid #999; } .panel .footer{ border-top:1px solid #999; } </style> </head> <body> <div id="app"> <panel> <div slot="title">皮囊</div> <div slot="content"> 我那個活到99歲的阿太（我外婆的母親），是個很牛的人。外婆50多歲突然撒手，阿太白髮人送黑髮人。親戚怕她想不開，輪流看著。她卻不知道哪裡來的一股憤怒，嘴裡罵罵咧咧，一個人跑來跑去。一會掀開棺材看看外婆的樣子，一會到廚房看看那祭祀的供品做得如何，走到大廳聽見有人殺一隻雞沒割中動脈，那隻雞灑著血到處跳，阿太小跑出來，一把抓住那隻雞，狠狠往地上一摔。 </div> <div slot="footer">更多資訊</div> </panel> <panel> <div slot="title">英語問好</div> <div slot="content"> how are you ? i am fine ,thank you , and you?</div> <div slot="footer">更多資訊</div> </panel> </div> <template id="panel-tpl"> <div class="panel"> <div class="title"> <slot name="title"></slot> </div> <div class="content"> <slot name="content"></slot> </div> <div class="footer"> <slot name="footer"></slot> </div> </div> </template>
Vue.component('panel',{
template:'#panel-tpl',
});
var app= new Vue({
el:'#app',
})