Как заменить this.$ Parent.$ Emit в Vue 3?

Question

Я перенес свое приложение на Vue 3.

Теперь мой линтер показывает ошибку устаревания, описанную здесь: https://eslint.vuejs.org/rules/no-deprecated-events-api.html.

В документации показано, как заменить this.$emit с mitt библиотека, но не показывает, как заменить this.$parent.$emit.

Answer 1

В вашем дочернем компоненте:

setup(props, { emit }) {
   ...
   emit("yourEvent', yourDataIFYouHaveAny);
}

Ваш родительский компонент:

<your-child @yourEvent="onYourEvent" />

...

onYourEvent(yourDataIFYouHaveAny) {

Answer 2

С помощью синтаксиса настройки скрипта вы можете:

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

Подробнее читайте здесь: https://learnvue.co/2020/01/4-vue3-composition-api-tips-you-should-know/

Answer 3

Благодаря API композиции он позволяет вам использовать $ attrs, унаследованные в каждом компоненте, чтобы теперь удовлетворить эту потребность.

Я предполагаю, что вы используете this.$ Parent.emit, потому что вы знаете, что дочерний элемент всегда будет частью одного и того же родителя. Как смоделировать описанное выше поведение с помощью $attrs?

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

Определение таблицы

       <template>
  <row v-bind="$attrs" ></row>
 </template>

Определение строки

      <template name="row" :item="row" @click=onClick(row)>
  Your Row 
</template>

export default {
    emits: {
      row_clicked: () =>{
       return true
      }
   }, 
   onClick(rowData){
     this.$emit('row_clicked',rowData)
  }
}

Наконец, компонент, содержащий определение вашей таблицы, где у вас есть метод обработки щелчка.

      <table
@row_clicked=clicked() 
>

</table

Компонент таблицы должен эффективно применять @row_clicked к компоненту строки, таким образом срабатывая, когда строка генерирует событие.

Answer 4

Есть аналогичный способ сделать это с помощью context аргумент, который передается во втором аргументе внутри дочернего компонента (того, который будет генерировать событие)

      setup(props, context){
     context.emit('myEventName')
}

... затем испустите его, вызвав context.emit метод в setup метод.

В родительском компоненте вы можете прослушивать его с помощью обработчика следующим образом:

      <MyParentComponent @myEventName="handleMyEventName" />

Конечно, в методе настройки MyParentComponent компонент, вы можете объявить обработчик следующим образом

      //within <script> tag of MyParentComponent
setup(props){
    const handleMyEventName() => {
            ...
    }
    return { handleMyEventName }
}