vue3中使用混入mixins在setup当中

前置

我们知道,在vue2的时候,想使用混入,直接就使用,但是在vue3里,就不一样了,多了setup
那么我们怎么使用混入在vue3当中的setup呢?
关键就是getCurrentInstance
示例
- https://codesandbox.io/s/vue3dang-zhong-setupshi-yong-hun-ru-shi-li-rfpdmz?file=/src/App.vue

使用

mixins/query.js文件

export default {
  methods: {
    sayHello() {
      alert("你好,我说hello");
    }
  }
};

App.vue(这里简单演示就直接在App.vue使用混入了)

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
import query from "./mixins/query.js";//引入混入
import { getCurrentInstance, onMounted } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  mixins: [query],//使用混入
  setup() {
    const { proxy } = getCurrentInstance();
    onMounted(() => {
      proxy.sayHello();
    });
  },
};
</script>

效果

需要注意的是使用时机

使用混入,最好是在onMounted之后,而不要直接在setup里面去使用(但是回调函数情况去使用除外)
- 如果在setup当中直接使用,会输出undefined,而在setup函数的回调当中却不会

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
  <button @click="onClick">我我我</button>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import query from "./mixins/query"; //引入混入
import { getCurrentInstance } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  mixins: [query],
  setup() {
    const { proxy } = getCurrentInstance();
    console.log(proxy.sayHello);//输出 'undefined'
     const onClick = () => {
      console.log('组件内方法调用mixin使用')
      proxy.sayHello();//调用方法
    }
    return {
      onClick,
    }
  },
};
</script>