vue에서 여러 매개변수를 전달하는 방법

Vue는 웹 애플리케이션과 사용자 인터페이스를 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue에서는 컴포넌트 렌더링, 메소드 호출 등과 같은 다양한 작업을 수행하기 위해 매개변수를 전달해야 하는 경우가 많습니다. 이 글에서는 Vue에서 여러 매개변수를 전달하는 방법을 소개합니다.

Vue에서는 Props를 통해 매개변수를 하위 구성요소에 전달할 수 있습니다. Props는 컴포넌트 간 통신 방법입니다. 예는 다음과 같습니다.

<script><br>import ChildComponent from './ChildComponent.vue';</p> <p> 기본 {<br> 구성 요소 내보내기: {</p> <pre class="brush:php;toolbar:false">ChildComponent</pre> <p>},<br> data() {</p> <pre class="brush:php;toolbar:false">return {   value1: 'some value',   value2: 123 }</pre> <p>}<br>}<br></script>

이 예에는 value1과 value2라는 두 가지 값이 있는 상위 구성 요소가 있습니다. 우리는 이 값을 ChildComponent에 Props로 전달하고 싶습니다. 여러 매개변수를 전달하려면 콜론(:)을 사용하여 각 매개변수를 구성 요소의 속성에 바인딩할 수 있습니다.

그러나 여러 매개변수를 전달하려는 경우 Props를 전달하려면 각 매개변수를 수동으로 바인딩해야 하므로 번거로울 수 있습니다. 다행히 Vue는 여러 매개변수를 전달하는 또 다른 방법, 즉 객체를 통해 매개변수를 전달하는 또 다른 방법을 제공합니다. T & lt; 템플릿 & gt;

<child-component v-bind="props"></child-component>

& lt;/div & lt;

스크립트 & gt; .vue' ;

export default {
구성 요소: {

ChildComponent

},
data() {

return {
  props: {
    prop1: 'some value',
    prop2: 123
  }
}

}
}

이 예에서는 v-bind 지시어를 사용하여 전달합니다. Props 객체를 ChildComponent 구성 요소에 추가합니다. 이것의 장점은 각 매개변수를 수동으로 바인딩하는 대신 여러 매개변수를 전달하기 위해 하나의 객체만 유지하면 된다는 것입니다. 또한 ChildComponent 구성 요소를 변경하지 않고도 상위 구성 요소에서 이러한 매개 변수를 쉽게 변경할 수 있습니다.

Prop 외에도 Vue는 데이터를 전달하는 이벤트 메커니즘을 제공합니다. $emit 메소드를 사용하여 하위 구성요소에서 이벤트를 트리거하고 상위 구성요소에서 이벤트를 수신하여 데이터를 수신할 수 있습니다.

<script><br>기본값 내보내기 {</p> 메서드: {<p></p> <pre class="brush:php;toolbar:false">sendData() {   this.$emit('send-data', {     prop1: 'some value',     prop2: 123   }); }</pre> <br>}}<p>& lt;/ script> ;<br><br>이 예에서는 하위 구성 요소에서 send-data 이벤트를 트리거하고 데이터 개체를 상위 구성 요소에 전달합니다. 상위 구성 요소에서는 v-on 지시문을 통해 이벤트를 수신하고 콜백 함수에서 데이터 객체를 받을 수 있습니다. T & lt; 템플릿 & gt; </p> <pre class="brush:php;toolbar:false">&lt;child-component @send-data=&quot;handleData&quot;&gt;&lt;/child-component&gt;</pre> & lt;/div & lt; <p><br> 스크립트 & gt; .vue' ;<br></p>export default {<p> Components: {</p> <pre class="brush:php;toolbar:false">ChildComponent</pre> <p>},<br> method: {</p> <pre class="brush:php;toolbar:false">handleData(data) {   console.log(data.prop1);   console.log(data.prop2); }</pre> <p>}<br>}</p></script>

요컨대 Vue에서 여러 매개변수를 전달하는 방법은 복잡하지 않습니다. . Props와 객체를 사용하여 매개변수를 전달하거나 $emit 트리거를 사용하고 하위 구성 요소와 상위 구성 요소 간의 이벤트를 수신할 수 있습니다. 어떤 방법을 선택하는지는 특정 요구 사항에 따라 다르지만 이는 Vue의 매우 유용한 기능입니다.

위 내용은 vue에서 여러 매개변수를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!