집 > 기사 > 웹 프론트엔드 > Vue 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까? Vue 상위 구성요소와 하위 구성요소 간의 통신 방법 4가지

Vue 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까? Vue 상위 구성요소와 하위 구성요소 간의 통신 방법 4가지

不言원래의: 2018-09-10 17:43:132315검색

이 글의 내용은 Vue 상위 컴포넌트와 하위 컴포넌트 간의 통신 방법에 관한 것입니다. Vue 상위 컴포넌트와 하위 컴포넌트 간의 통신 방법에는 일정한 참고 가치가 있으므로 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

현재 상위-하위 통신 방법에는 네 가지가 있습니다.

1. 상위 구성 요소가 하위 구성 요소에 데이터를 전달합니다.
상위 구성 요소 데이터가 하위 구성 요소로 어떻게 전달되나요? 이것은 props 속성을 통해 달성할 수 있습니다
부모 컴포넌트:

58652436a08d62d32b90566dafe0913c b189eeee14645d7772f2c737ba7338c77d4dd9c7239aac360e401efe89cbb393//这里必须要用 - 代替驼峰db7b8d074c72824ed121864240fe4c81data(){ return { msg: [1,2,3] };}

자식 컴포넌트는 props를 통해 데이터를 받습니다:
방법 1:

props: [&#39;childMsg&#39;]

방법 2:

props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告}
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 }}

이런 방식으로 부모 컴포넌트는 자식에게 데이터를 전송합니다

2. 하위 컴포넌트는 상위 컴포넌트와 통신합니다
그렇다면 하위 컴포넌트가 데이터를 변경하고 싶다면 어떻게 해야 할까요? Vue에서는 단방향 데이터 전송만 허용하기 때문에 이는 허용되지 않습니다. 현재로서는 사용자 정의 이벤트를 트리거하여 상위 구성 요소에 데이터를 변경하도록 알릴 수 있으며 이를 통해 하위 구성 요소 데이터를 변경하는 목적을 달성할 수 있습니다. v-on 바인딩 사용자 정의 이벤트 사용

각 Vue 인스턴스는 이벤트 인터페이스를 구현합니다. 즉:

$on(eventName)을 사용하여 이벤트를 수신합니다.
$emit(eventName)을 사용하여 이벤트를 트리거합니다.

상위 구성 요소는 하위 구성 요소에서 사용할 수 있습니다. v-on을 직접 사용하여 하위 구성 요소에 의해 트리거되는 이벤트를 수신합니다.

하위 구성 요소:

<template> <div 
@click="up"></div></template>methods: { up() { 
this.$emit(&#39;resultChange&#39;,&#39;hehe&#39;); //主动触发resultChange方法，&#39;hehe&#39;为向父组件传递的数据
 }}

상위 구성 요소:

<div> <child @on-result-change="mychangHandle" 
:msg="msg"></child> 
//监听子组件触发的upup事件,然后调用change方法</div>methods: { mychangHandle(msg) {
 this.msg = msg; }}

트리거된 이벤트는 Camel Case 형식의 맞춤 이벤트 이름을 사용하며 상위 구성 요소에서 on-evnet-name을 사용하여 수신할 수 있습니다.

3. 구성 요소 간의 통신
두 구성 요소가 상위-하위 구성 요소가 아닌 경우 어떻게 통신합니까? 이때, 통신은 eventHub를 통해 가능합니다.
이벤트 허브라고 불리는 것은 환승 스테이션과 같은 역할을 하는 이벤트 센터를 만드는 것으로, 이벤트를 전달하고 이벤트를 수신하는 데 사용할 수 있습니다.
빈 Vue 인스턴스를 다음과 같이 사용합니다. 중앙 이벤트 버스:

let Hub = new Vue(); //创建事件中心,注意Hub要放在全局

Component 1 Trigger:

<div @click="eve"></div>methods: { eve() { Hub.$emit(&#39;change&#39;,&#39;hehe&#39;); //Hub触发事件 }}

Component 2 Receiver:

<div></div>created() { Hub.$on(&#39;change&#39;, () => { //Hub接收事件 this.msg = &#39;hehe&#39;; });}

4. $refs

소품과 이벤트에도 불구하고 JavaScript에서 직접 하위 구성 요소에 액세스해야 하는 경우가 있습니다. ref를 사용하여 하위 구성 요소에 대한 인덱스 ID를 지정하면 이를 수행할 수 있습니다.

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: &#39;#parent&#39; })
// 访问子组件
var child = parent.$refs.profile

ref가 v-for와 함께 사용되는 경우 ref는 해당 하위 구성요소를 포함하는 배열 또는 객체입니다.

Vue 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까? Vue 상위 구성요소와 하위 구성요소 간의 통신 방법 4가지

관련 기사