vue3.0 mixin混入语法

<!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:
            `
{{number}}
{{count}}
{{this.$options.define}}
`
}); //设置优先使用mixin中值 app.config.optionMergeStrategies.number = (mixinVal, appValue) => { return mixinVal || appValue } //全局mixin混入 // app.mixin({ // data() { // return { // number: 10, // count: 234 // } // } // }) app.mount('#root'); </script> </html>

你可能感兴趣的:(vue)