Vue Composition API: определение излучений

Когда определяет пользовательские события, Vue рекомендует нам определять генерировать события в компоненте с помощью параметра emits:

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

При использовании API композиции Vue 3, когда автономная функция композиции генерирует пользовательские события, можно ли определить их в функции композиции?


vue.js vuejs3 vue-composition-api
person PeterB    schedule 22.01.2021    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Нет, потому что функции композиции используются внутри ловушки setup, которая не имеет доступа к другим параметрам, таким как methods и emits:

export default defineComponent({
    name: "layout",
     emits: ['showsidebar']
    setup(props,{emit}) {
        const showSidebar = ref(true);
        const {
            breakpoints
        } = useBreakpoint();
        watch(breakpoints, (val) => {
            showSidebar.value = !(val.is === "xs" || val.is === "sm");
            emit('showsidebar',showSidebar.value )
        });
        return {
            showSidebar,
        };
    },
    data() {
        ...
    },

в приведенном выше примере useBreakpoint предлагает только некоторую логику, которую компонент мог бы использовать для поведения, если есть какой-либо способ определить эту опцию испускания в функции композиции, эта функция всегда будет генерировать это событие, даже если эта функция используется внутри компонента, определяющего обработчик испускаемое событие.

person Boussadjra Brahim    schedule 22.01.2021
comment
Спасибо за четкое объяснение. Я использовал Composition API для обмена кодом между компонентами, в которых изменяется только раздел <template></template>, поэтому необходимость каждый раз определять излучение и реквизиты разочаровывает. Есть ли лучший подход для этого варианта использования? - person PeterB; 22.01.2021
comment
добро пожаловать, у вас есть два варианта: использовать миксины или расширить - person Boussadjra Brahim; 22.01.2021
comment
Я рекомендую использовать миксины, вы можете проверить этот пример - person Boussadjra Brahim; 22.01.2021

arrow_upward
1
arrow_downward

Я сделал так с синтаксисом настройки скрипта:

<script setup>
    import { defineEmit } from 'vue'
    
    const emit = defineEmit(['close'])
    
    const handleClose = () => {
        emit('close')
    }
</script>
person agm1984    schedule 05.07.2021