vue.extend,mixins和vue.component的區(qū)別及說明
更新時間：2024年09月21日 14:36:24 作者：web_彭于晏
Vue.extend 創(chuàng)建Vue的子類,可視為組件構(gòu)造函數(shù),Vue.mixin 允許全局添加方法或?qū)傩?方便所有組件使用,Vue.component 是插件注冊方法,通過Vue.extend創(chuàng)建的組件實例可以注冊到Vue全局,使其在任何組件中可用
1.vue.extend
Vue.extend就是傳入一下組件options，然后返回了一個Vue的子類，也可以看做是一個組件構(gòu)造函數(shù)。
例子：
可以通過vue.component將這個vue子類注冊到全局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注冊組件</title>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue " type="text/javascript"></script>
<script>
/**
* 請注意，extend創(chuàng)建的是一個組件構(gòu)造器，而不是一個具體的組件實例。
* 所以他不能直接在new Vue中這樣使用： new Vue({components: fuck})
* 最終還是要通過Vue.components注冊才可以使用的。
*/
// 構(gòu)建一個子組件
var todoItem = Vue.extend({
template: ` <li> {{ text }} </li> `,
props: {
text: {
type: String,
default: ''
}
}
})
// 構(gòu)建一個父組件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// 局部注冊子組件
components: {
todoItem: todoItem
}
})
// 注冊到全局
Vue.component('todo', todoWarp)
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '隨便其它什么人吃的東西' }
]
}
})
</script>
</html>2.vue.mixin
mixins可以全局添加一些方法或?qū)傩?，方便所有組件調(diào)用?？梢杂脕硖砑油ㄓ玫膶ο笠煤头椒?
在混入的時候會先執(zhí)行混入的created再執(zhí)行組件里的created，當(dāng)方法沖突時會使用當(dāng)前組件里的
例子：
Vue.mixin({
data:{
//組件中可以使用this.$axios來調(diào)用axios的方法，十分方便
$axios: axios
},
methods: {
//每個組件從全局store中取出用戶信息
getUser() {
return store.getters.user;
}
}
})3.vue.component
Vue.component是一個插件注冊方法，就是把Vue.extend函數(shù)new出來的組件實例，注冊到Vue的Options上。
本質(zhì)是也就是在全局Vue實例的Options，添加了一個key/value，value就是組件實例。由于組件的
Options會繼承Vue的Options，所以在任何組件中，都能調(diào)用該組件。
Vue.component('global-component', Vue.extend(baseOptions));這是原始的調(diào)用方式，用Vue.extend注冊一個組件。
Vue內(nèi)部對其進(jìn)行了簡化，可以省略調(diào)用Vue.extend，只傳入Options就行了
//傳入一個選項對象（自動調(diào)用 Vue.extend）,等價于上行代碼.
Vue.component('global-component', baseOptions);???????總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)手機(jī)驗證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Vue代理請求數(shù)據(jù)出現(xiàn)404問題及解決
這篇文章主要介紹了Vue代理請求數(shù)據(jù)出現(xiàn)404的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
詳解如何使用vue和electron開發(fā)一個桌面應(yīng)用
這篇文章主要為大家介紹了詳解如何使用vue和electron開發(fā)一個桌面應(yīng)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
在現(xiàn)代Web應(yīng)用中,瀏覽器自動填充功能雖然提升了用戶體驗,但在某些安全敏感的場景下（如登錄、支付等）,我們可能需要防止自動填充以確保用戶手動輸入憑據(jù),本文基于實際的Vue.js登錄頁面,詳細(xì)介紹一套完整的防自動填充解決方案,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了原理深度解析Vue的響應(yīng)式更新比React快，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了vue?+?elementui實現(xiàn)表格多級表頭，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
IDEA創(chuàng)建Vue項目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項目的兩種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。2023-04-04
這篇文章主要介紹了vue-cli中的webpack是如何配置的，本篇文章主要是分析vue中關(guān)于config文件夾中的相關(guān)代碼，config的文件結(jié)構(gòu)，感興趣的朋友參考下本文2018-01-01
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08