Функция запуска Vue с параметрами от дочернего элемента неожиданно

Question

У меня есть следующий компонент:

<template>
  <button class="button" @[click]="action">{{ text }}</button>
</template>

<script>
export default {
  name: "Button",
  props: {
    action: {
      type: Function,
      required: false
    },
    text: {
      type: String,
      required: true
    },
    inputType: {
      type: String,
      required: false
    }
  },
  computed: {
    click() {
      return this.action ? "click" : null;
    }
  }
};
</script>

Однако, когда я передаю функцию как action с параметром, функция уже запускается при рендеринге.Без параметра он работает нормально.

<v-button inputType="button" :action="say('Hello')" text="Alert" />
<v-button inputType="button" :action="say" text="Alert" />

Триггерная функция:

say(message) {
    alert(message);
}

Вы можете увидеть поведение здесь .Глядя на this , я ожидаю, что он будет работать с передачей параметров.

Итак, мой вопрос, как я могу предотвратить триггер при рендеринге?

Answer 1

Использование $emit

Вместо передачи функции в дочерний компонент, вы можете вместо этого генерировать событие clicked;Например:

<button class="button" @click="$emit('clicked')">{{ text }}</button>

Затем прослушайте событие emitted на самом компоненте, запустив вашу функцию:

<v-button inputType="button" @clicked="say('Hello')" text="Alert" />

Хотя отправка и обработка событий - отличный способ взаимодействия с дочерним компонентомдля своего родителя он может несколько сломаться, когда компонент, генерирующий событие, не является прямым потомком;Например: если компонент является внуком.

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

Использование <slot>

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

<modal>
  <v-button @clicked="say('hi)" text="Alert"/>
</modal>

Использование функции более высокого порядка

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

В вашем случае вы хотите передать метод say потомку с аргументом.Вы хотите передать функцию, но не вызывать ее, но когда вы передаете аргумент say(), вы тут же вызываете его:

<v-btn :action="say('hi')">

Решение здесь - переписать say, чтобы оно такжевозвращает функцию, которая затем будет вызываться при нажатии кнопки:

say (message) {
  return () => alert(message)
}

Это означает, что вы должны вызывать метод say при передаче его компоненту кнопки, даже есливы не передаете message этому экземпляру кнопки.Итак, сработает следующее:

<v-button :action="say()" text="Alert"/>

Но это не так, потому что не вызывает внутреннюю функцию:

<v-button :action="say" text="Alert"/>

Надеюсь, это поможет:)