标签：混入 vue console log created app number mixin

定义一个mixin对象

        const mymixin = {
            data(){
                return {
                    count:2,
                    number:666,
                    childs:12
                }
            },
            created(){
                console.log('mixin created');
            },
            methods:{
                mixinclick(){
                    console.log('mixin click');
                }
            },
        }
        const app = Vue.createApp({
            data(){
                return{
                    count:1
                }
            },
            mixins:[mymixin],
            created(){
                console.log('created');
            },
            template:`
                <div @click="mixinclick">
                    {{count}}
                    {{number}}
                    <child/>
                </div>
            `
        })
        app.component('child',{
            mixins:[mymixin],
            template:`<div>{{childs}}</div>`
        })
        app.mount('#root');

全局mixin

        const app = Vue.createApp({
            data(){
                return{
                    count:1
                }
            },
            //mixins:[mymixin],
            created(){
                console.log('created');
            },
            template:`
                <div @click="mixinclick">
                    {{count}}
                    {{number}}
                    <child/>
                </div>
            `
        })
        app.component('child',{
            //mixins:[mymixin],
            template:`<div>{{childs}}</div>`
        })
        app.mixin({
            data(){
                return {
                    count:2,
                    number:666,
                    childs:12
                }
            },
            created(){
                console.log('mixin created');
            },
            methods:{
                mixinclick(){
                    console.log('mixin click');
                }
            },
        })
        app.mount('#root');

自定义属性

自定义的属性，组件中的优先级高于mixin属性优先级

vue中位定义的属性会保存在 options中，可以通过 this.$options.访问

        const mymixin = {
            data(){
                return {
                    count:2,
                    number:666,
                    childs:12
                }
            },
            created(){
                console.log('mixin created');
            },
            methods:{
                mixinclick(){
                    console.log('mixin click');
                }
            },
        }
        const app = Vue.createApp({
            mixins:[mymixin],
            number:11,
            created(){
                console.log('created');
            },
            template:`
                <div @click="mixinclick">
                    {{count}}
                    <div>{{this.$options.number}}</div>
                    <child/>
                </div>
            `
        })
        app.component('child',{
            mixins:[mymixin],
            template:`<div>{{childs}}</div>`
        })
        app.mount('#root');

更改自定义属性优先级

        app.config.optionMergeStrategies.number = (mixinValue,appValue) =>{
            return mixinValue || appValue;
        }

        const mymixin = {
            number:666,
            data(){
                return {
                    count:2,
                    childs:12
                }
            },
            created(){
                console.log('mixin created');
            },
            methods:{
                mixinclick(){
                    console.log('mixin click');
                }
            },
        }
        const app = Vue.createApp({
            mixins:[mymixin],
            number:1111111111111,
            created(){
                console.log('created');
            },
            template:`
                <div @click="mixinclick">
                    {{count}}
                    <div>{{this.$options.number}}</div>
                    <child/>
                </div>
            `
        })
        app.component('child',{
            mixins:[mymixin],
            template:`<div>{{childs}}</div>`
        })

        app.config.optionMergeStrategies.number = (mixinValue,appValue) =>{
            return mixinValue || appValue;
        }

        app.mount('#root');

标签：混入,vue,console,log,created,app,number,mixin
来源： https://blog.csdn.net/m0_47214316/article/details/119045992

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。