Vue 구성 요소 통신: 상위 구성 요소와 하위 구성 요소 간에 어떻게 통신합니까?-PHP 튜토리얼-php.cn

Vue 구성 요소 통신: 상위 구성 요소와 하위 구성 요소 간에 어떻게 통신합니까?

王林

풀어 주다： 2023-07-07 19:08:01

원래의

1227명이 탐색했습니다.

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

Vue는 웹 애플리케이션을 구축하는 구성 요소 기반 방법을 제공하는 인기 있는 JavaScript 프레임워크입니다. 실제 개발에서는 부모 컴포넌트와 자식 컴포넌트 간의 통신이 필요한 상황에 자주 직면합니다. 이 기사에서는 Vue에서 일반적으로 사용되는 상위-하위 구성 요소 통신 방법을 소개하고 해당 코드 예제를 제공합니다.

Props

Props는 Vue의 상위 컴포넌트와 하위 컴포넌트 간에 가장 일반적으로 사용되는 통신 방법입니다. 이를 통해 상위 구성 요소가 하위 구성 요소에 데이터를 전달할 수 있습니다. 하위 구성요소에서 props는 상위 구성요소가 전달한 데이터를 수신하기 위한 배열 또는 객체로 선언됩니다.

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
};
</script>

로그인 후 복사

위의 예에서 상위 구성 요소는 message라는 prop을 하위 구성 요소에 전달합니다. 하위 구성 요소는 전달된 데이터를 받기 위해 props 배열을 통해 동일한 이름의 속성을 선언합니다. 하위 컴포넌트의 템플릿에서는 수신된 데이터를 보간식 {{ message }}를 통해 표시할 수 있습니다.

Emit

상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 것 외에도 하위 구성 요소에서 상위 구성 요소로 데이터를 보내거나 이벤트를 트리거해야 하는 경우가 많습니다. Vue는 하위 구성요소가 Emit을 통해 상위 구성요소와 통신할 수 있는 방법을 제공합니다.

<!-- 父组件 -->
<template>
  <div>
    <child-component @rating-updated="updateRating"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateRating(rating) {
      // 处理子组件发出的rating更新事件
      console.log('Rating updated:', rating);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    ...
    <button @click="updateRating">Update Rating</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateRating() {
      const rating = 5; // 子组件的评分数据
      this.$emit('rating-updated', rating);
    }
  }
};
</script>

로그인 후 복사

위 예에서 하위 구성 요소의 버튼 클릭 이벤트는 updateRating 메서드를 트리거하고 this.$emit(' rating-updated', rating) 이벤트를 통해 rating-updated라는 사용자 정의 값을 상위 구성 요소로 보냅니다. 등급 데이터 등급을 통과했습니다. 하위 구성 요소에서 발생한 등급 업데이트 이벤트를 수신하고 updateRating 메서드에서 이벤트를 처리하려면 상위 구성 요소에서 @ating-updated="updateRating"을 사용하세요.

$refs

때로는 상위 구성 요소에서 직접 하위 구성 요소의 속성이나 메서드에 액세스해야 하는 경우가 있습니다. Vue는 이 직접 액세스 방법을 구현하기 위해 $refs 속성을 제공합니다.

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    Child Component
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called.');
    }
  }
};
</script>

로그인 후 복사

위의 예에서 상위 구성 요소의 버튼 클릭 이벤트는 callChildMethod 메서드를 호출합니다. 메서드 내에서 this.$refs.childComponent는 하위 구성 요소에 액세스하고 하위 구성 요소의 childMethod 메서드를 호출하는 데 사용됩니다.

Provide/Inject

Provide/Inject는 상위 구성 요소가 레이어별로 명시적으로 전달하지 않고도 모든 하위 구성 요소에 데이터를 제공할 수 있도록 하는 고급 구성 요소 통신 방법입니다. 이 통신 방법은 크로스 레벨 구성 요소 간의 통신에 적합합니다.

<!-- 祖先组件 -->
<template>
  <div>
    ...
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor component!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  components: {
    GrandchildComponent
  }
};
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

로그인 후 복사

위의 예에서 상위 컴포넌트는 Provide 메소드를 통해 하위 컴포넌트에 message라는 데이터를 제공합니다. 손자 구성 요소는 inject: ['message']를 통해 이 데이터를 주입하고 템플릿에서 {{ message }}를 사용하여 표시합니다.

위에서는 Vue에서 일반적으로 사용되는 상위-하위 구성 요소 통신 방법을 소개합니다. 각 방법에는 적용 가능한 시나리오가 있습니다. 실제 개발에서는 특정 요구에 따라 적절한 통신 방법을 선택할 수 있습니다. 이 글이 Vue 컴포넌트 통신을 이해하는 데 도움이 되기를 바랍니다!

참조 링크: