Vue 문서의 구성 요소 데이터 전송 및 이벤트 전송 구현 방법

Vue는 개발자가 복잡한 페이지를 작고 독립적인 모듈로 분해할 수 있도록 하는 구성 요소화 기능을 갖춘 인기 있는 프런트 엔드 프레임워크입니다. Vue에서는 컴포넌트 간 데이터 전송과 이벤트 전송이 매우 중요한 주제입니다. 이번 글에서는 Vue에서 컴포넌트 데이터 전송과 이벤트 전송을 구현하는 방법을 자세히 소개하겠습니다.

1. 컴포넌트 데이터 전송

Vue에서 컴포넌트 데이터 전송은 두 가지 범주로 나누어집니다. 하나는 상위 컴포넌트에서 하위 컴포넌트로의 전송이고, 다른 하나는 하위 컴포넌트에서 상위 컴포넌트로의 전송입니다.

1. 상위 구성 요소가 하위 구성 요소에 데이터를 전달합니다.

상위 구성 요소에서 하위 구성 요소로 데이터를 전달하려면 props 옵션을 사용해야 합니다. Props는 하위 구성 요소가 상위 구성 요소에서 전달한 데이터를 받는 방법입니다. 상위 컴포넌트의 v-bind: 속성명을 통해 하위 컴포넌트에 데이터를 전달하고, 하위 컴포넌트의 props 옵션을 통해 데이터를 받습니다.

먼저 상위 구성 요소의 코드를 살펴보세요.

<template>
  <div>
    <child-component :title="title"></child-component>
  </div>
</template>

<script>
import ChildComponent from './child.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      title: 'this is the title'
    }
  }
}
</script>

위 코드에서는 기본 구성 요소를 정의하고 v-bind:를 통해 하위 구성 요소에 제목 속성을 전달합니다.

그런 다음 하위 구성 요소의 코드를 살펴보세요.

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

위 코드에서는 하위 구성 요소를 정의하고 props 옵션을 통해 상위 구성 요소가 전달한 title 속성을 받습니다.

2. 하위 구성 요소가 상위 구성 요소에 데이터를 전달합니다.

하위 구성 요소에서 상위 구성 요소로 데이터를 전달하려면 $emit 메서드를 사용해야 합니다. $emit는 하위 구성 요소가 상위 구성 요소에 데이터를 전달하는 방법입니다. 하위 구성요소의 $emit 메소드를 사용하여 사용자 정의 이벤트를 트리거하고 전달해야 하는 데이터를 전달합니다. @event 이름을 통해 상위 구성요소에서 이 사용자 정의 이벤트를 수신하고 하위 구성요소가 전달한 데이터를 수신합니다. 이벤트 응답 기능.

먼저 하위 구성요소의 코드를 살펴보세요.

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
      this.$emit('increment', this.count)
    }
  }
}
</script>

위 코드에서는 하위 구성요소를 정의하고 $emit 메소드를 사용하여 버튼을 클릭할 때 맞춤 이벤트 증분을 트리거하고 현재 카운트 값을 매개변수로 사용합니다. 상위 구성 요소에 전달됩니다.

그런 다음 상위 구성 요소의 코드를 살펴보세요.

<template>
  <div>
    <h1>{{ totalCount }}</h1>
    <child-component @increment="onChildIncrement"></child-component>
  </div>
</template>

<script>
import ChildComponent from './child.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      totalCount: 0
    }
  },
  methods: {
    onChildIncrement (count) {
      this.totalCount += count
    }
  }
}
</script>

위 코드에서 상위 구성 요소를 정의하고 하위 구성 요소의 증가 이벤트를 수신할 때 카운트 값을 응답 함수 onChildIncrement에 매개 변수로 전달합니다. , 그리고 응답에서 함수의 totalCount 값을 업데이트합니다.

2. 컴포넌트 이벤트 전달

Vue에서는 이벤트 버스와 vuex를 통해 컴포넌트 간 이벤트 전달이 가능합니다.

1. 이벤트 버스

이벤트 버스는 중앙 이벤트 버스를 생성하는 간단한 이벤트 전달 방법이며, 모든 구성 요소는 이벤트를 이벤트 버스에 등록하거나 이벤트를 트리거할 수 있습니다. Vue에서는 Vue.prototype.$bus 속성을 사용하여 이벤트 버스를 생성할 수 있습니다.

먼저 이벤트 버스 사용 방법을 살펴보겠습니다.

// main.js中创建事件总线
import Vue from 'vue'

Vue.prototype.$bus = new Vue()

// 在需要传递事件的组件中注册事件和触发事件
this.$bus.$emit('my-event', data)

this.$bus.$on('my-event', (data) => { ... })

위 코드에서는 main.js 파일의 Vue.prototype.$bus 속성을 통해 이벤트 버스를 생성한 다음 해당 컴포넌트에 $를 전달합니다. 이벤트를 전달해야 합니다. 방출 메소드는 사용자 정의 이벤트 my-event를 트리거하고 이벤트를 수신해야 하는 구성요소의 이벤트 응답 함수에 매개변수로 전달해야 하는 데이터를 전달하고 사용자 정의를 수신합니다. $on 메소드를 통해 이벤트 my-event를 전달하고, 이벤트 응답 함수에서 전달된 데이터를 받습니다.

2.vuex

vuex는 공식적으로 권장되는 상태 관리 솔루션으로 모든 구성 요소의 상태를 전역 상태 트리에 배치하고 모든 구성 요소는 전역 상태 트리에서 상태를 얻고 업데이트할 수 있습니다. vuex에서는 저장소 객체를 사용하여 전역 상태를 저장하고 돌연변이, 작업 및 getter를 통해 전역 상태를 수정할 수 있습니다.

먼저 vuex 사용 방법을 살펴보겠습니다.

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement (context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

// 在组件中使用vuex
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'asyncIncrement'
    ])
  }
}

위 코드에서는 전역 상태를 store.js 파일에 저장하는 저장소 개체를 정의하고 돌연변이, 액션 및 getter를 사용하여 전역 상태를 수정하고 가져옵니다. ; 컴포넌트에서는 스토어의 상태, 수정 함수, 액션 함수를 mapState, mapMutations, mapActions, mapGetters 등의 보조 함수를 통해 매핑하여 컴포넌트에서 사용합니다.

결론

Vue에서는 구성 요소 간 데이터 전송과 이벤트 전송이 매우 중요한 주제입니다. 다양한 시나리오와 요구 사항에 따라 props, $emit, 이벤트 버스 및 vuex를 사용하여 다양한 방식으로 데이터를 전달할 수 있습니다. 이러한 기술을 익히면 Vue 애플리케이션을 보다 유연하게 구성하고 관리할 수 있습니다.

위 내용은 Vue 문서의 구성 요소 데이터 전송 및 이벤트 전송 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!