欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.extend,mixins和vue.component的區(qū)別及說明

 更新時(shí)間：2024年09月21日 14:36:24   作者：web_彭于晏  
Vue.extend 創(chuàng)建Vue的子類,可視為組件構(gòu)造函數(shù),Vue.mixin 允許全局添加方法或?qū)傩?方便所有組件使用,Vue.component 是插件注冊方法,通過Vue.extend創(chuàng)建的組件實(shí)例可以注冊到Vue全局,使其在任何組件中可用

1.vue.extend

Vue.extend就是傳入一下組件options，然后返回了一個(gè)Vue的子類，也可以看做是一個(gè)組件構(gòu)造函數(shù)。

例子：

可以通過vue.component將這個(gè)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è)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例。
 * 所以他不能直接在new Vue中這樣使用： new Vue({components: fuck})
 * 最終還是要通過Vue.components注冊才可以使用的。 
 */

// 構(gòu)建一個(gè)子組件
var todoItem = Vue.extend({
    template: ` <li> {{ text }} </li> `,
    props: {
        text: {
            type: String,
            default: ''
        }
    }
})

// 構(gòu)建一個(gè)父組件
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)用?？梢杂脕硖砑油ㄓ玫膶ο笠煤头椒?

在混入的時(shí)候會先執(zhí)行混入的created再執(zhí)行組件里的created，當(dāng)方法沖突時(shí)會使用當(dāng)前組件里的

例子：

Vue.mixin({
    data:{
        //組件中可以使用this.$axios來調(diào)用axios的方法，十分方便
        $axios: axios
    },
    methods: {
        //每個(gè)組件從全局store中取出用戶信息
        getUser() {
            return store.getters.user;
        }
    }
})

3.vue.component

Vue.component是一個(gè)插件注冊方法，就是把Vue.extend函數(shù)new出來的組件實(shí)例，注冊到Vue的Options上。

本質(zhì)是也就是在全局Vue實(shí)例的Options，添加了一個(gè)key/value，value就是組件實(shí)例。由于組件的

Options會繼承Vue的Options，所以在任何組件中，都能調(diào)用該組件。

Vue.component('global-component', Vue.extend(baseOptions));

這是原始的調(diào)用方式，用Vue.extend注冊一個(gè)組件。

Vue內(nèi)部對其進(jìn)行了簡化，可以省略調(diào)用Vue.extend，只傳入Options就行了

//傳入一個(gè)選項(xiàng)對象（自動調(diào)用 Vue.extend）,等價(jià)于上行代碼.
Vue.component('global-component', baseOptions);

???????總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論