mixin 混入和 改变自定义属性 策略

 // mixin 混入

        //  组件 data，methods 优先级高于 mixin 里面的 data ， methods优先级

        //  生命周期函数 先执行 mixin 里面的，再执行组件里面的

        const myMixin = {

            data(){

                return {

                    number:2,

                    count: 222

                }

            },

            created(){

                console.log('mixins created');

            },

            methods:{

                handleClick(){

                    console.log('mixins handleClick');

                }

            },

        }

     

       var app = Vue.createApp({

            data(){

                return {

                    number:1  

                }  

            },  

            mixins:[myMixin],

            created(){

                console.log('created');

            },

            methods:{

                handleClick(){

                    console.log('handleClick');

                }

            },

            template:`  

                <div>{{number}}</div>

                <child />

                <button @click="handleClick">增加</button>    

            `,  

        })

       

        app.component('child',{

            mixins:[myMixin],

            template:'<div>{{count}}</div>'

        })

        app.mount('#root')

 

------------------------------------------

     

 // mixin 混入

        //  组件 data，methods 优先级高于 mixin 里面的 data ， methods优先级

        //  生命周期函数 先执行 mixin 里面的，再执行组件里面的

        const myMixin = {

            number:3

        }

 

       var app = Vue.createApp({

            number:2,

            mixins:[myMixin],

            template:`  

                <div>{{this.$options.number}}</div>  

            `,  

        })

 

        // 改变自定义属性 策略

        app.config.optionMergeStrategies.number = (mixinVal,appValue)=>{

            return mixinVal || appValue

        }

     

        app.mount('#root')