<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app1"> <h1>{{msg}}</h1> <h1>{{this.$options.age}}</h1> </div> <p>----------------------------</p> <div id="app2"> <h1>{{msg}}</h1> </div> <script src="js/vue.3.2.2.js"></script> <script> //定义一个mixin对象 const myMixin = { data(){//定义数据 return { msg:'你好！' } }, methods:{ hello(){ console.log("hello"); } }, mounted(){ console.log("mounted"); }, age:100 }; // 1、创建Vue的实例对象 const app1 = Vue.createApp({ data(){//定义数据 return { msg:'你好1！' } }, methods:{ hello(){ console.log("hello1"); } }, mixins:[myMixin], age:99, mounted(){ console.log("mounted1"+this.$options); } }); //通过配置决定使用哪个属性 app1.config.optionMergeStrategies.age = (mixinVal,appValue)=>{ return mixinVal || appValue; } app1.mount('#app1'); const app2 = Vue.createApp({ // mixins:[myMixin] }); app2.mixin({ data(){//定义数据 return { msg:'你好2！' } }, methods:{ hello(){ console.log("hello"); } }, mounted(){ console.log("mounted"); }, age:100 }); app2.mount('#app2'); </script> </body> </html>