props가 vue에서 함수를 전달할 수 있나요?-프런트엔드 Q&A-php.cn

props가 vue에서 함수를 전달할 수 있나요?

WBOY

풀어 주다： 2022-06-16 10:40:09

원래의

7777명이 탐색했습니다.

Vue의 Prop은 함수를 전달할 수 있으며, 문자열, 배열, 숫자 및 객체는 Vue에서 Prop으로 전달될 수 있습니다. Prop은 주로 외부에서 전달된 데이터를 수신하는 데 사용됩니다. 구문은 "기본값 내보내기 {메서드: {myFunction() {// ...}}};"입니다.

props가 vue에서 함수를 전달할 수 있나요?

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.

vue의 소품 전송 기능

Vue 초보자들이 자주 묻는 질문입니다. 문자열, 배열, 숫자, 객체는 props로 전달될 수 있습니다. 그런데 함수를 props로 전달할 수 있나요? props传递。但是你能把一个函数当作一个props来传递吗?

虽然可以将函数作为props

함수를 props로 전달하는 것은 가능하지만 좋지 않습니다. 반대로 Vue에는 이 문제를 해결하기 위해 특별히 설계된 기능이 있습니다. 다음으로 살펴보겠습니다.

함수를 구성 요소에 전달

함수나 메서드를 가져와 하위 구성 요소에 prop으로 전달하는 것은 비교적 간단합니다. 실제로 이는 다른 변수를 전달하는 것과 정확히 동일한 방식으로 작동합니다.

<template>
  <ChildComponent :function="myFunction" />
</template>

export default {
  methods: {
    myFunction() {
      // ...
    }
  }
};

로그인 후 복사

앞서 말했듯이 Vue에서는 절대로 이와 같은 작업을 수행해서는 안 됩니다.

왜? Vue에는 더 나은 것이 있습니다.

React vs Vue

React를 사용해보신 분들이라면 함수 전달에 익숙해지실 겁니다.

React에서는 하위 구성 요소가 상위 구성 요소와 위쪽으로 통신할 수 있도록 상위 구성 요소에서 하위 구성 요소로 함수를 전달할 수 있습니다. Props와 데이터는 아래로 흐르고, 함수 호출은 위로 흐릅니다.

그러나 Vue에는 부모 간 통신을 구현하는 다른 메커니즘이 있으며 Vue는 이벤트를 사용합니다.

이것은 DOM이 작동하는 방식과 동일합니다. Vue의 방식은 React보다 브라우저와 더 일관됩니다. 요소는 이벤트를 내보내고 이러한 이벤트를 수신할 수 있습니다.

Vue에서는 함수를 props로 전달하는 것이 가능하지만 이는 안티 패턴으로 간주됩니다.

이벤트 사용

이벤트는 Vue에서 상위 구성 요소와 통신하는 방법입니다.

다음은 이벤트 작동 방식에 대한 간단한 예입니다.

먼저 생성 시 이벤트를 내보내는 하위 구성 요소를 만듭니다.

// ChildComponent
export default {
  created() {
    this.$emit(&#39;created&#39;);
  }
}

로그인 후 복사

상위 구성 요소에서 이벤트를 수신합니다.

<template>
  <ChildComponent @created="handleCreate" />
</template>

export default {
  methods: {
    handleCreate() {
      console.log(&#39;Child has been created.&#39;);
    }
  }
};

로그인 후 복사

이벤트로 할 수 있는 일이 더 많지만 이는 단지 모피에 불과합니다. 이에 대해 자세히 알아보려면 공식 Vue 문서를 확인하는 것이 좋습니다. 확실히 읽어 볼 가치가 있습니다.

그러나 이벤트가 우리의 모든 문제를 완전히 해결할 수는 없습니다.

하위 구성 요소에서 상위 구성 요소 범위의 데이터에 액세스

많은 경우 우리가 해결하려는 문제는 다른 범위의 데이터에 액세스하는 것입니다.

상위 구성 요소에는 하나의 범위가 있고 하위 구성 요소에는 또 다른 범위가 있습니다.

일반적으로 우리는 상위 구성 요소에서 하위 구성 요소의 값에 액세스하거나 하위 구성 요소에서 상위 구성 요소의 값에 액세스하려고 합니다. Vue는 이를 직접적으로 수행하는 것을 방지하는데 이는 좋은 일입니다.

구성 요소를 더욱 캡슐화하고 재사용성을 높입니다. 이렇게 하면 코드가 더 깔끔해지고 장기적으로 많은 골칫거리를 피할 수 있습니다.

하지만 때로는 함수를 통해 이 문제를 해결하려고 할 수도 있습니다.

「부모 클래스에서 값 가져오기」

자식 컴포넌트가 부모 컴포넌트의 메서드에 액세스하도록 하려면 해당 메서드를 prop으로 직접 전달하는 것이 간단하고 간단해 보입니다.

상위 구성 요소에서는 다음을 수행합니다.

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

로그인 후 복사

자식 구성 요소에서는 전달된 메서드를 사용합니다.

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

로그인 후 복사

이 작업을 수행하면 무엇이 문제가 될까요?

완전히 틀린 말은 아니지만 이런 경우에는 이벤트를 활용하는 것이 좋을 것 같습니다.

그런 다음 필요할 때 하위 구성 요소는 함수를 호출하지 않고 이벤트만 발생시킵니다. 그런 다음 상위 구성 요소는 이벤트를 수신하고 함수를 호출하며 어셈블리는 하위 구성 요소에 전달된 소품을 업데이트합니다.

이것이 동일한 효과를 얻는 더 좋은 방법입니다.

다른 경우에는 하위 요소의 값을 상위 요소로 가져오고 싶을 수 있으며 이를 위해 함수를 사용합니다.

예를 들어 이런 일을 하고 있을 수도 있습니다. 상위 함수는 하위 함수의 값을 받아 처리합니다.

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log(&#39;From the child:&#39;, valueFromChild);
    }
  }
}

로그인 후 복사

하위 구성 요소에 전달된 메서드를 호출하고 하위 구성 요소의 값을 메서드의 매개 변수로 전달합니다.

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: &#39;I am the child.&#39; };
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method(this.value);
  }
}

로그인 후 복사

이는 완전히 틀린 것은 아닙니다. 이렇게 하면 가능합니다.

Vue에서 수행하는 가장 좋은 방법은 아닙니다. 대신 이벤트가 문제 해결에 더 적합합니다. 이벤트를 사용하면 똑같은 결과를 얻을 수 있습니다.

<!-- Parent -->
<template>
  <ChildComponent @send-message="handleSendMessage" />
</template>

// Parent
export default {
  methods: {
    handleSendMessage(event, value) {
      // Our event handler gets the event, as well as any
      // arguments the child passes to the event
      console.log(&#39;From the child:&#39;, value);
    }
  }
}

로그인 후 복사

자식 구성 요소에서는 이벤트를 발생시킵니다.

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: &#39;I am the child.&#39; };
  },
  mounted() {
    // Instead of calling the method we emit an event
    this.$emit(&#39;send-message&#39;, this.value);
  }
}

로그인 후 복사

이벤트는 Vue에서 매우 유용하지만 문제를 100% 해결하지는 않습니다. 때로는 다른 방식으로 부모로부터 자식 범위에 액세스해야 하는 경우도 있습니다.

이를 위해 우리는 범위가 지정된 슬롯을 사용합니다!