vue使用mixins定义通用方法 (相当于js里面可以使用vue里面的this)

vue使用mixins定义通用方法 (相当于js里面可以使用vue里面的this)

具体步骤:

1. 创建一个引入的文件(例如:myMixin.js)

2. myMixin.js写内容

   export default {
         
         
   	methods: {
         
         
   	   // 通用的方法名称
   	   globalMethod() {
         
         
   	      console.log(this.msg); // 访问Vue实例的属性
   	   },
   	},
   };
   

3. 调用页面引入myMixin.js(省略vue的结构)

   import myMixin from "@/myMixin.js";
   export default {
         
         
     mixins: [myMixin],
     ...
   };
   

4. 调用方式:

   1. 直接在页面调用

   <button @click="globalMethod"></button>
   

   2. 在方法里面二次调用(省略vue结构)

    <button @click="handleClick">Click me</button>
    import myMixin from "@/myMixin.js";
    export default {
         
         
      mixins: [myMixin],
      data() {
         
         
        return {
         
         
          msg: "Hello World!",
        };
      },
      methods: {
         
         
        handleClick() {
         
         
         this.globalMethod(); // 在Vue组件中调用mixin中定义的全局方
       },
     },
   };