ChingFeng
Sep 3, 2018 · 4 min read

VueJs元件篇-component(六)

外部定義參數

使用component中的mixins屬性

◉應用

=【Html】=
— — — — — — — — — — — —
<div id="app">
<man></man>
<cat></cat>
</div>
— — — — — — — — — — — —
=【VueJs】=
— — — — — — — — — — — —
var superPowersMixin = {
data(){
return {
superPowers: false
}
},
methods:{
superMe(){
this.$el.classList.add("super");
this.superPowers = true;
}
},
created(){
this.$options.template = `<div><h3 v-show="superPowers">super</h3>`+ this.$options.template + `<button @click="superMe" v-if="!superPowers">Super!</button></div>`;
}
}
Vue.component('man',{
template: '<p>👨🏻man</p>',
mixins: [superPowersMixin]
});
Vue.component('cat',{
template: '<p>🐱cat</p>',
mixins: [superPowersMixin]
});
new Vue({
el: '#app'
});

◉進階應用-混合mixins(可獨立、可混用)

=【Html】=
— — — — — — — — — — — —
<div id="app">
<greeter></greeter>
<super-greeter></super-greeter>
</div>
— — — — — — — — — — — —
=【VueJs】=
— — — — — — — — — — — —
var Greeter = {
template: '<p>{{message}}<button @click="greet">greet</button></p>',
data () {
return {
message: '...'
}
},
methods: {
greet () {
this.message = 'hello'
}
}
}
var SuperGreeter = {
mixins: [Greeter],
template: '<p>{{message}}<button @click="superGreet">supergreet</button></p>',
methods: {
superGreet () {
this.message = 'SUPER HELLO!'
}
}
}
new Vue({
el: '#app',
components: { Greeter, SuperGreeter }
})

Object實戰

學習歷程紀錄

ChingFeng

Written by

叢林般的世界,一步步邁向未知的未來,迴盪迷途的工程師…

Object實戰

學習歷程紀錄

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade