Vue はミックスインを使用して一般的なメソッドを定義します (js の vue でこれを使用するのと同等)

Vue はミックスインを使用して一般的なメソッドを定義します (js の vue でこれを使用するのと同等)

具体的な手順:

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. メソッド内の 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中定义的全局方
       },
     },
   };