Vue3의 메소드 기능: Vue3 컴포넌트 간의 통신 방법을 마스터하세요

Vue3은 현재 가장 인기 있는 프런트엔드 프레임워크 중 하나입니다. 강력한 기능과 간단하고 사용하기 쉬운 API로 높은 평가를 받고 있습니다. Vue3는 구성 요소 간 통신, 상태 관리, 동적 구성 요소 등을 포함하여 다양한 구성 요소를 구성하고 상호 작용할 수 있는 다양한 방법을 제공합니다. Vue3에서는 일부 메소드 함수를 사용하여 컴포넌트 간의 통신을 구현할 수 있습니다.

1. props

props는 Vue3의 중요한 기능이며, 컴포넌트의 속성을 정의하고 데이터를 전송하는 방법입니다. 구성 요소에서 하위 구성 요소로 데이터를 전달해야 하는 경우 props를 사용할 수 있습니다. 허용하려는 속성이 포함된 하위 구성 요소의 props 옵션에 배열을 지정할 수 있습니다. 상위 구성 요소에서 속성을 전달하면 이러한 속성이 자동으로 하위 구성 요소에 전달되어 사용할 수 있습니다. 다음은 간단한 예입니다.

<template>
  <div>
    <Child :message="message" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

Child 구성 요소에서는 props를 통해 데이터를 받을 수 있습니다.

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

각 속성의 유형은 props 옵션에 지정되어야 합니다. 하위 구성 요소에 전달되었습니다. 데이터 유형이 정확합니다.

2. emit

emit은 Vue3에서 일반적으로 사용되는 또 다른 구성 요소 간 통신 방법입니다. 하위 구성 요소에서 이벤트를 트리거해야 하는 경우 내보내기 메서드를 사용할 수 있습니다. 상위 구성 요소에서 이 이벤트를 수신하고 일부 작업을 수행할 수 있습니다. 다음은 간단한 예입니다.

<template>
  <div>
    <Child @alert="showAlert" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  methods: {
    showAlert(msg) {
      alert(msg)
    }
  }
}
</script>

하위 구성 요소에서는 $emit를 사용하여 이벤트를 트리거할 수 있습니다.

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick() {
      this.$emit('alert', 'Hello World!')
    }
  }
}
</script>

사용자가 버튼을 클릭하면 하위 구성 요소가 경고 이벤트를 트리거하고 상위 구성 요소에 메시지를 전달합니다. 가운데.

3. provide/inject

provide/inject는 Vue3에서 제공하는 또 다른 컴포넌트 간 통신 방법입니다. 하위 구성 요소에 일부 데이터를 제공할 수 있다는 점에서 소품 및 방출과 약간 다릅니다. 하위 구성 요소는 삽입 옵션을 통해 이 데이터를 받을 수 있습니다. 다음은 간단한 예입니다.

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  provide: {
    message: 'Hello World!'
  },
  components: { Child }
}
</script>

Child 구성 요소에서는 주입 옵션을 사용하여 이 데이터를 수신할 수 있습니다.

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

수신해야 하는 데이터의 이름이 주입 옵션에 지정되어 있으므로 주의하세요. 하위 구성 요소에서 직접 사용할 수 있습니다.

4. $parent/$children

$parent와 $children은 Vue3에서 제공하는 구성 요소 간의 통신을 위한 두 가지 다른 도구입니다. $parent는 하위 구성 요소에서 상위 구성 요소의 속성이나 메서드에 액세스하는 데 사용되는 반면, $children은 상위 구성 요소에서 하위 구성 요소의 속성이나 메서드에 액세스하는 데 사용됩니다. 이 두 가지 옵션은 Vue3에서 제공되므로 Vue3의 향후 버전에서는 폐기될 수 있습니다.

5. $attrs/$listeners

$attrs와 $listeners는 Vue3에서 제공하는 두 가지 놀라운 옵션입니다. $attrs 옵션은 전달된 모든 속성을 구성 요소에 제공하며 다음과 같이 하위 구성 요소의 props 옵션과 함께 사용할 수 있습니다.

<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$attrs) // { message: "Hello World!" }
  }
}
</script>

하위 구성 요소에서:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

위 예에서 하위 구성 요소는 다음을 사용할 수 있습니다. $attrs 옵션은 해당 props 옵션을 수신하고 정의합니다.

$listeners 옵션은 상위 구성 요소의 모든 이벤트 리스너를 구성 요소에 제공합니다. 이렇게 하면 하위 구성 요소에서 이러한 이벤트 리스너를 사용할 수 있습니다. 아래와 같이:

<template>
  <div>
    <button v-on="$listeners">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$listeners) // { 'click': [f1] }
  }
}
</script>

사용자가 버튼을 클릭하면 상위 구성 요소의 이벤트 리스너가 실행됩니다.

요약

이 문서에는 Vue3에서 일반적으로 사용되는 구성 요소 간 통신 방법이 나열되어 있습니다. 이러한 메서드에는 소품, 방출, 제공/주입, $parent/$children 및 $attrs/$listeners가 포함됩니다. 이러한 방법을 사용하면 다양한 구성 요소를 더 효과적으로 구성하고 상호 작용할 수 있으며, 개발 효율성을 높이고 사용자 경험을 향상할 수 있습니다. 실제로 비즈니스 목표를 달성하기 위해 여러 가지 방법을 동시에 사용해야 할 수 있으므로 옵션을 인지하고 적용 시기와 위치를 파악해야 합니다.

위 내용은 Vue3의 메소드 기능: Vue3 컴포넌트 간의 통신 방법을 마스터하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!