Функция expose() в Vue3

Vue3 选项式 APIVue3 Options API

В Vue3,expose()функция — это инструмент, используемый для предоставления доступа к внутренним методам и свойствам компонента в Composition API.

expose()Обычно используется вместе сsetup()функцией, она позволяет разработчикам явно указать, к каким внутренним свойствам и методам компонента можно получить доступ извне.

Зачем нужна функция expose()?

В Vue2 свойства и методы компонента по умолчанию являются публичными и доступны напрямую извне. Однако такой дизайн может привести к некоторым проблемам, например:

  1. Проблемы безопасности: внутренние методы могут быть случайно раскрыты, что приводит к небезопасным операциям.
  2. Проблемы сопровождения: сложно отследить, какие свойства и методы используются извне, что увеличивает сложность сопровождения.

Vue3 вводитexpose()функцию, позволяющую разработчикам более точно управлять публичным интерфейсом компонентов, тем самым решая вышеуказанные проблемы.

Как использовать функцию expose()?

Базовый синтаксис

Пример

export default {
  setup(props, context) {
    const internalMethod = () => {
      console.log('Это внутренний метод');
    };

    const publicMethod = () => {
      console.log('Это публичный метод');
    };

    // Предоставить метод publicMethod
    context.expose({
      publicMethod
    });

    return {
      internalMethod
    };
  }
};

Объяснение

В приведённом выше коде мы определили два метода:internalMethodиpublicMethod. С помощьюcontext.expose(), мы предоставили толькоpublicMethod, тогда какinternalMethodне будет доступен извне.

Примеры сценариев

1. Взаимодействие родительского и дочернего компонентов

Предположим, у нас есть родительский компонент и дочерний компонент, и родительскому компоненту нужно вызвать метод дочернего компонента.

Дочерний компонент

Пример

export default {
  setup(props, context) {
    const childMethod = () => {
      console.log('Вызван метод дочернего компонента');
    };

    context.expose({
      childMethod
    });

    return {};
  }
};

Родительский компонент

Пример

import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    onMounted(() => {
      if (childRef.value) {
        childRef.value.childMethod();
      }
    });

    return {
      childRef
    };
  }
};

2. Инкапсуляция библиотеки компонентов

При разработке библиотеки компонентов мы можем захотеть предоставить только некоторые методы и свойства, чтобы сохранить инкапсуляцию и безопасность компонентов.

Пример

export default {
  setup(props, context) {
    const internalState = ref('внутреннее состояние');
    const publicState = ref('публичное состояние');

    const publicMethod = () => {
      console.log('Публичный метод вызван');
    };

    context.expose({
      publicState,
      publicMethod
    });

    return {
      internalState
    };
  }
};

Примечания

  1. Вызов expose() несколько раз: Если вызвать несколько разexpose(), будет доступно только содержимое последнего вызова.
  2. Использование вместе с ref: В родительском компоненте вы можете использоватьrefчтобы ссылаться на дочерний компонент и вызывать его открытые методы.
  3. Совместимость：expose()— это новая возможность Vue3. Убедитесь, что в вашем проекте используется Vue3 или выше.

Vue3 选项式 APIVue3 Options API

Другие расширения