优雅的使用Ref调用组件方法- Vue 3指南

前端

2024-01-28 21:11:49

前言
在Vue 3中，通过ref获得组件实例的优雅指南，以及如何使用ref调用组件方法的最佳实践。涵盖了如何在模板中使用ref，以及如何在组件中定义和调用方法的具体步骤和示例。

背景

在使用组件库时，经常需要通过ref获得组件实例，并调用组件上的方法。如el-form组件的validate校验方法，el-table组件的toggleRowSelection等方法。

在Vue 2中，可以使用$refs属性来访问ref的组件实例，但在Vue 3中，这种方式已被弃用，取而代之的是使用ref的current属性。

使用ref来访问组件实例

在Vue 3中，使用ref来访问组件实例有以下几种方式：

在模板中使用ref属性

<el-form ref="form">
  <!-- 表单内容 -->
</el-form>

使用setup函数来获取ref

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const formRef = ref(null);

    onMounted(() => {
      console.log(formRef.value); // 此时可以访问到el-form组件实例
    });

    return {
      formRef,
    };
  },
};

使用provide/inject来传递ref

// 父组件
export default {
  provide() {
    return {
      formRef: ref(null),
    };
  },
};

// 子组件
export default {
  inject: ['formRef'],

  setup() {
    console.log(formRef.value); // 此时可以访问到el-form组件实例
  },
};

在组件中定义和调用方法

在组件中定义和调用方法与Vue 2中的方式基本相同，可以继续使用methods选项来定义方法。

export default {
  methods: {
    validateForm() {
      this.$refs.form.validate();
    },
  },
};

优雅的使用ref调用组件方法

在实际项目中，可能会遇到以下几个问题：

在模板中使用ref属性，会导致组件实例暴露在外，不利于代码维护。
使用setup函数来获取ref，需要在组件中定义多个变量，增加代码复杂度。
使用provide/inject来传递ref，需要在多个组件之间传递ref，容易导致循环依赖。

为了解决这些问题，可以考虑使用以下几个优雅的使用ref调用组件方法的方式：

使用自定义指令来包装ref

import { ref } from 'vue';

export default {
  install(Vue) {
    Vue.directive('form', {
      mounted(el, binding) {
        binding.value(ref(el));
      },
    });
  },
};

然后在模板中使用：

<el-form v-form="form">
  <!-- 表单内容 -->
</el-form>

这样就可以在组件中通过this.$form来访问el-form组件实例。

使用mixin来包装ref

import { ref } from 'vue';

export default {
  data() {
    return {
      formRef: ref(null),
    };
  },
  methods: {
    getFormRef() {
      return this.formRef;
    },
  },
};

然后在组件中使用mixin：

import FormMixin from './form-mixin';

export default {
  mixins: [FormMixin],

  setup() {
    console.log(this.getFormRef().value); // 此时可以访问到el-form组件实例
  },
};