我這次標題直接給她猛烈的亂下,但其實Mixins就真的是代表一個 讓元件共用的方法,Mixin 就是指這個共用的元件,而這個元件可以包含任何的component option~ (option = data, methods, computed...)
我們之所以會需要這個東西是各位可以想像一下,如果今天有一些methods,或是computed會常常需要用到,舉個例子,今天我們一個網頁裡面有很多地方都要做一個user 驗證的事情,那我們就要在每個Vue file裡面的methods
做一樣的事情。
但是,老話一句~ 我懶XD,大家也懶所以就有了這個樣子的東西,我們可以在一個地方寫好東西,之後直接引進來!
不說了我們就直接進code。首先我們先define一個 mixin object:
var firstMixin = {
created: function () {
this.gretting()
},
methods: {
greeting: function () {
console.log('hello I am Mixin')
}
}
}
所以我們定義了一個mixin object叫做 firstMixin
,我們綁定的component option 就是 methods
本人~
接下來要怎麼應用他呢? 我們進到component裡面 (這邊用最簡單的new Vue({}))
new Vue({
mixins: [mixin],
});
這樣就可以成功呼叫囉!
各位可以打開project了~ 不知道各位做的怎麼樣,進度到哪
我們之前應該有一個東西,在Home.vue裡面~ 我已經把他額外做出來放在一個新的vue
檔案裡面。
<template>
<div>
<b-card
v-for="blog in this.blogs"
:key="blog.id"
:title="blog.title"
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
{{ blog.body }}
</b-card-text>
<b-button href="#" variant="primary">See More</b-button>
</b-card>
</div>
</template>
<script>
export default {
data() {
return {
blogs: [],
};
},
created() {
this.$http
.get("http://jsonplaceholder.typicode.com/posts")
.then(function(data) {
this.blogs = data.body.slice(0, 10);
});
},
};
</script>
現在我們希望要做到的就是一個可以搜尋 filter這些blogs的功能,就是可以在一個文字框裡面搜尋一些字,然後系統可以透過這個函示幫忙尋找那些文章含有這些關鍵字!
我們先在src裡面創一個資料夾叫做mixins,然後在裡面創一個JavaScript 檔案,大概這個位置:
好了之後進到 searchMixin.js這個檔案裏面,然後打上這串:
export default {
computed: {
filteredBlogs: function() {
return this.blogs.filter((blog) => {
return blog.title.match(this.search);
});
}
}
};
這邊一樣注意幾個點~
export
: 我們要在這邊輸出這個mixin,讓其他人可以在不同的component裡面輸入~computed
: 這就是屬於component 裡面的options之一this
: 這邊有一個this,但是如果有印象的話,this 通常都要綁定data(){}
裡面的資料,但是這邊沒有data啊? 這邊的this是要看被哪一個component引入*(import)*的。filter()=>{}
這也會回傳出一個新的陣列,這劇的意思就是我把原本的陣列this.blogs
放進去,然後他要 filter出有沒有符合 this.search
的文章,把有的都放進新的陣列!那既然我們已經寫好mixin,他也已經準備隨時都可以export了,我們就在已經寫好的code裡面import她吧!
<script>
import searchMixin from '../mixins/searchMixin';
export default {
data() {
return {
blogs: [],
search: '',
};
},
created() {
this.$http
.get("http://jsonplaceholder.typicode.com/posts")
.then(function(data) {
this.blogs = data.body.slice(0, 10);
});
},
mixins: [searchMixin]
};
</script>
在來看幾個重點:
import
這個mixin所在的位置data
,created
同一層放了mixin,因為如果還記得的話,我們的mixin object是一個computed()
search
,那是要拿來記錄user input要查的資料
那我們都已經引進了mixin,剛剛也說到filter出來的新陣列就會儲存在 filteredBlogs
裡面,所以我們這邊就可以直接使用新的陣列來跑v-for
了~
<template>
<div>
<input type="text" v-model="search" placeholder="search blogs" />
<b-card
v-for="blog in filteredBlogs"
:key="blog.id"
:title="blog.title"
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
{{ blog.body }}
</b-card-text>
<b-button href="#" variant="primary">See More</b-button>
</b-card>
</div>
</template>
input
來拿取user想要查詢filter的資料 -> 丟到this.search
這個data裡面。this.blogs
改成filteredBlogs
,在一開始沒有filter的時候他就是 = this.blogs
,但有filter之後他就會回傳新的陣列讓我們列出來~v-for
列出來!今天最主要就是介紹這個好用的mixin~ 的確是vue可以接受的共用功能 (不要抨擊我亂下標題XD),明天會傳coding,少一點觀念
.
.
.
可能吧