Vue 구성 요소에 값을 전달하는 방법은 무엇입니까?

Vue 구성 요소 값 전송 방법: 1. props를 사용하여 데이터를 전달합니다. 상위 구성 요소는 HTML 속성을 통해 하위 구성 요소에 데이터를 전달하고, 하위 구성 요소는 props를 통해 전달된 데이터를 받습니다. 2. $emit를 사용하여 이벤트를 트리거합니다. 데이터를 전달하기 위해 하위 구성 요소는 $emit를 사용하여 사용자 정의 이벤트를 트리거하고 상위 구성 요소는 v-on을 사용하여 하위 구성 요소 사용자 정의 이벤트를 수신합니다. 3. 제공/주입을 사용하여 레벨 간에 값을 전달합니다. 상위 구성 요소는 제공을 통해 데이터를 제공하고 하위 구성 요소는 주입을 사용하여 데이터를 수신합니다.

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

Vue 구성 요소 간의 값 전송은 props, $emit 및 제공/주입의 세 가지 방법으로 이루어질 수 있습니다.

props를 사용하여 데이터 전달:

상위 구성 요소의 HTML 속성을 통해 하위 구성 요소에 데이터를 전달합니다. 하위 구성요소는 props를 통해 상위 구성요소가 전달한 데이터를 받습니다.

상위 구성 요소:

<template>
  <div>
    <ChildComponent :message="message"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

하위 구성 요소:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

$emit를 사용하여 이벤트를 트리거하여 데이터 전달:

하위 구성 요소에서 $emit를 사용하여 사용자 정의 이벤트를 트리거하고 매개 변수로 전달해야 하는 데이터를 전달합니다. 상위 구성 요소는 v-on을 사용하여 하위 구성 요소의 맞춤 이벤트를 수신하고 전달된 데이터를 얻습니다.

상위 구성 요소:

<template>
  <div>
    <ChildComponent v-on:custom-event="updateData"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;&#39;
    }
  },
  methods: {
    updateData(data) {
      this.message = data;
    }
  }
}
</script>

하위 구성 요소:

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateMessage() {
      this.$emit(&#39;custom-event&#39;, &#39;New Message&#39;);
    }
  }
}
</script>

교차 레벨 값 전송을 위해 Provide/Inject 사용:

상위 구성 요소에서 제공을 통해 데이터를 제공한 다음 주입을 사용하여 하위 구성 요소에서 데이터를 받습니다. .

부모 컴포넌트:

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

하위 컴포넌트:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  inject: [&#39;message&#39;]
}
</script>

위는 Vue 컴포넌트가 값을 전달하는 세 가지 방법입니다. 특정 시나리오와 요구 사항에 따라 구성 요소 간에 데이터를 전송하는 데 적합한 방법을 선택할 수 있습니다.

위 내용은 Vue 구성 요소에 값을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!