Vue

VUE3之Composition API(一)

mixin和extends

mixin的基本使用

mixin本质上是一个对象,其中可以包含一个组件的option属性:

export const demoMixin = {
    data() {
        return {
            message:"hello demoMixin"
        }
    },
    methods: {
        foo(){
            console.log("demo mixin foo");
        }
    },
    created() {
        console.log("执行了demo mixin");
    },
}

在使用时,写在组件的options的mixins属性里面:

<script>
import {demoMixin} from './mixins/demoMixin.js'
    export default {
        mixins:[demoMixin],
        data() {
            return {
                title: "hello world"
            }
        },
        methods: {
            
        },
    }
</script>

如果mixin与组件中不存在命名冲突,就直接合并,如果存在冲突,分成不同情况处理:

返回值对象默认情况下会合并,如果data返回值对象的属性发生了冲突,那么会保留组件自身的数据。

生命周期钩子函数会被合并到数组中,都会被调用。

对于methods、computed这种对象,会直接合并,如果对象的key相同,则采用组件的value。

全局mixin

全局mixin是直接调用app实例的mixin方法,并传入mixin对象完成的,所有app的组件都会享有全局mixin的内容:

const app=createApp(App);
app.mixin({
    created() {
        console.log("全局的生命周期")
    },
})
app.mount('#app');

extends

extends类似于OOP的继承,可以让一个页面继承于另一个页面:

// BasePage.vue
<script>
    export default {
        data() {
            return {
                title:"hello page"
            }
        },
        methods: {
            bar(){
                console.log("base page bar");
            }
        },
    }
</script>
// Home.vue
<template>
    <div>
        home page
        <h2>{{title}}</h2>
        <button @click="bar">按钮</button>
    </div>
</template>

<script>
import BasePage from './BasePage.vue';
    export default {
        extends:BasePage
    }
</script>

extends的规则和用法与mixin相同,并且只能继承父组件的script标签的内容。

发表评论