Vue usa mixins para definir métodos comunes (equivalente a usar esto en vue en js)

Vue usa mixins para definir métodos comunes (equivalente a usar esto en vue en js)

Pasos específicos:

1. Cree un archivo importado (por ejemplo: myMixin.js)

2. myMixin.js escribe contenido

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

3. Llame a la página para presentar myMixin.js (omita la estructura de vue)

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

4. Método de llamada:

   1. llama directamente a la pagina

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

   2. Segunda llamada al método (omitir la estructura 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中定义的全局方
       },
     },
   };