vue3.0 mixin混入语法

最新推荐文章于 2024-07-24 22:25:19 发布

@huihui_new

最新推荐文章于 2024-07-24 22:25:19 发布

阅读量744

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_52544128/article/details/114117777

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 28</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //mixin 混入
    //组件data、methods优先级高于mixin中 data、methods优先级
    //生命周期函数，先执行mixin里面的，再执行组件里面的
    //自定义属性，组件中的属性优先级高于 mixin 属性的优先级

    //局部mixin混入
    const myMixin = {
        define: 555,
        data() {
            return { 
                number: 2,
                count: 4
            }
        },
        created() {
            console.log('mixin');
        },
        methods: {
            handleClick() {
                console.log('handleClick1');
            }
        }
    }


    const app = Vue.createApp({
        // data() {
        //     return { number: 1 }
        // },
        //自定义属性
        difine: 888,
        mixins: [myMixin],
        created() {
            console.log('zujian');
        },
        methods: {
            handleClick() {
                console.log('handleClick');
            }             
        },
        template:
            `<div>
                <div>{{number}}</div>
                <div>{{count}}</div>
                <div>{{this.$options.define}}</div>
            </div>
            <button @click="handleClick">增加</button>`
    });
    
    //设置优先使用mixin中值
	app.config.optionMergeStrategies.number = (mixinVal, appValue) => {
        return mixinVal || appValue
    }
    
    //全局mixin混入
    // app.mixin({
    //     data() {
    //         return {
    //             number: 10,
    //             count: 234
    //         }
    //     }
    // })
    app.mount('#root');
    
</script>
</html>