하위의 매개 변수가 있는 Vue 트리거링 함수가 예기치 않음

하위의 매개 변수가 있는 Vue 트리거링 함수가 예기치 않음

다음과 같은 컴포넌트가 있습니다.

<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);
}

여기서 그 행동을 볼 수 있습니다.이걸 보면 패싱패럴과도 잘 통할 것 같아요.

그래서 어떻게 하면 렌더링의 트리거를 막을 수 있을까요?

사용.$emit

기능을 자 컴포넌트에 전달하지 않고 대신 기능을 내보낼 수 있습니다.clicked이벤트; 예:

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

그런 다음 컴포넌트 자체에서 발생한 이벤트를 듣고 기능을 트리거합니다.

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

이벤트 방출 및 처리가 하위 구성요소에서 부모 구성요소로 통신하는 깔끔한 방법이지만 이벤트를 방출하는 구성요소가 직계 후손이 아닌 경우(예: 구성요소가 손자일 경우)에는 다소 분해될 수 있습니다.

Vue는 컴포넌트 트리를 통해 암묵적으로 이벤트를 버블화하지 않습니다.이것은 이벤트 동작을 명확하게 하기 위한 설계라고 생각합니다.

사용.<slot>

이 경우 슬롯을 사용하여 컴포넌트가 작성된 범위에 대한 액세스로 컴포넌트를 작성한 후 다른 자 컴포넌트에 네스트하는 것이 좋습니다.

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

고차 함수 사용

그렇지 않으면 함수를 하위 구성요소로 전달해야 하고 해당 함수에 인수도 있는 경우 상위 함수로 생성해야 합니다.

당신의 경우, 당신은 다음 단계를 통과하고 싶어합니다.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"/>

이것이 도움이 되기를 바랍니다:)

언급URL : https://stackoverflow.com/questions/54617729/vue-triggering-function-with-params-from-child-unexpected