집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js 컴포넌트 통신 예시 공유

Vue.js 컴포넌트 통신 예시 공유

小云云원래의: 2018-01-04 10:17:271502검색

저는 Vue.js에 관심이 많고 주로 작업하는 기술 스택이 Vue.js이기 때문에 지난 몇 달 동안 시간을 내어 Vue.js 소스 코드를 공부하고 요약 및 출력을 만들었습니다. 구성 요소는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 이 기사에서는 Vue.js 구성 요소 통신에 대한 몇 가지 자세를 공유할 것입니다. 관심 있는 친구들은 한 번 살펴보시기 바랍니다.

앞서 작성

이해에 차이가 있을 수 있습니다. 문제 제기 및 지적을 환영하며, 함께 배우고 함께 발전해 나가세요.

Vue 구성요소란 무엇인가요?

Component는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 경우에 따라 구성 요소는 is 속성으로 확장된 기본 HTML 요소의 형태를 취할 수도 있습니다.

Vue 구성 요소 간 통신

상위 구성 요소는 하위 구성 요소와 통신합니다.

방법 1: props

prop를 사용하면 상위 구성 요소는 prop을 사용하여 하위 구성 요소에 데이터를 전달할 수 있습니다.

상위 구성 요소 vue 템플릿 father.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</script>

하위 구성 요소 vue 템플릿 child.vue

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

방법 2 $children을 사용

$children을 사용하여 상위 구성 요소의 하위 구성 요소에 액세스합니다.

자식 구성 요소는 상위 구성 요소와 통신합니다

방법 1: vue 이벤트 사용

상위 구성 요소는 이벤트 메서드를 하위 구성 요소에 전달하고, 하위 구성 요소는 $emit를 통해 이벤트를 트리거하고 상위 구성 요소를 다시 호출합니다.

상위 구성 요소 vue 템플릿 father.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

하위 구성 요소 vue 템플릿 child.vue

<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit('msgFunc');
    }
  }
}
</script>

방법 2: 상위 구성 요소가 전달한 props를 수정하여 상위 구성 요소 데이터를 수정합니다.

이 방법은 참조만 전달할 수 있습니다. 상위 구성 요소 변수를 사용할 때 사용할 수 있지만 리터럴 변수는 해당 효과를 얻을 수 없습니다. Drinking 변수는 상위 컴포넌트의 데이터이든 하위 컴포넌트에서 얻은 props의 데이터든 궁극적으로 동일한 메모리 주소를 가리키므로 하위 컴포넌트의 props에 있는 데이터를 수정하면 상위 컴포넌트의 데이터도 수정됩니다. 요소.

하지만 이렇게 하는 것은 권장되지 않습니다. 데이터를 사용하여 수정 내용을 표시하는 경우에는 실제 개발 시 데이터에 넣고 상위 구성 요소에 다시 전달하는 경우가 많습니다. 그런 다음 이벤트를 사용하여 데이터를 반환해야 합니다. 이는 구성 요소를 독립적이고 분리된 상태로 유지하며 동일한 데이터 사용으로 인해 비정상적인 데이터 흐름 혼란을 일으키지 않습니다. 데이터를 수정하기 위해 특정 인터페이스를 통해서만 데이터를 전송하고 내부 데이터 상태는 특화된 데이터에 의해 관리됩니다.

방법 3: $parent를 사용하세요

$parent를 사용하여 상위 구성 요소의 데이터에 액세스합니다.

비부모-자식 구성요소와 형제 구성요소 간의 데이터 전송

비부모-자식 구성요소 통신에서 Vue는 공식적으로 Vue 인스턴스를 중앙 이벤트 버스로 사용할 것을 권장합니다.

Vue에는 내부 이벤트 메커니즘이 있으므로 소스 코드를 참조할 수 있습니다.

$on 메소드는 이벤트를 듣는 데 사용됩니다.

$emit은 이벤트를 트리거하는 데 사용됩니다.

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
  //......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');

다단계 상위-하위 컴포넌트 통신:

Vue1.0에서는 $broadcast 및 $dispatch라는 두 가지 메소드를 구현하여 하위 컴포넌트(또는 상위 컴포넌트)에 브로드캐스트(또는 디스패치)합니다. 상위 구성 요소) 이벤트가 수신되고 true를 반환하면 이벤트는 계속해서 손자 수준 구성 요소에 브로드캐스트(또는 전달)됩니다. 하지만 이 메서드는 Vue2.0에서 제거되었습니다.

Ele.me의 오픈소스 컴포넌트 라이브러리 요소를 연구하던 중 브로드캐스트 및 디스패치 방식을 다시 구현하여 믹스인 형식으로 도입한 것을 발견했습니다. 자세한 내용은 "요소 컴포넌트 라이브러리 브로드캐스트 및 디스패치에 대한 이야기"를 참조하세요. 보내다". 하지만 Vue1.0의 두 가지 메소드 구현과는 약간 다릅니다. 이 두 메서드는 하위 구성 요소에 대한 이벤트 브로드캐스팅 기능과 다중 수준 상위 구성 요소에 대한 이벤트 디스패치 기능을 구현합니다. 하지만 넓은 의미의 이벤트 브로드캐스트는 아닙니다. 지정된 컴포넌트 이름을 가진 컴포넌트에 이벤트를 브로드캐스트(디스패치)하려면 commentName을 지정해야 합니다.

실제로 이 두 메서드의 내부 구현에서는 여전히 $parent 및 $children을 사용합니다. 이는 하위 노드를 순회하거나 상위 노드를 단계별로 쿼리하는 데 사용됩니다. 지정된 구성 요소 이름에 액세스하면 $emit가 호출되어 지정된 이벤트.

복잡한 단일 페이지 애플리케이션 데이터 관리

애플리케이션이 충분히 복잡하다면 데이터 관리를 위해 vuex를 사용하세요.

Vue.js 컴포넌트 통신 예시 공유

관련 기사