Vue.js 구성 요소 통신의 여러 상태에 대한 자세한 분석

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

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

Vue 구성 요소 간 통신

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

방법 1: props

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

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

<template>
  <child :msg="message"></child>
</template>
<script>
import child from &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  data () {
    return {
      message: &#39;father message&#39;;
    }
  }
}
</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 &#39;./child.vue&#39;;
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(&#39;msgFunc&#39;);
    }
  }
}
</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 구성 요소 통신의 여러 상태에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!