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

Vue에서 구성 요소는 사용자 인터페이스를 구축하는 데 중요한 부분이며 인터페이스를 더 작고 재사용 가능한 부분으로 쉽게 분해할 수 있습니다. 페이지에는 여러 구성 요소가 포함될 수 있으므로 구성 요소 간의 통신이 중요해집니다. 특히 상위 구성 요소와 하위 구성 요소 간의 통신입니다.

Vue는 props와 $emit를 통해 상위 구성 요소와 하위 구성 요소 간의 통신을 구현합니다. 이 기사에서는 두 가지 방법을 모두 소개합니다.

1. Props

Props는 Vue의 상위 구성 요소가 하위 구성 요소에 데이터를 전달하는 방식입니다. props는 하위 구성 요소에 전달될 데이터 속성을 저장하는 배열입니다. 하위 구성 요소에서는 props를 사용하여 상위 구성 요소에서 전달된 데이터를 받습니다.

props 사용법: 먼저 상위 컴포넌트에 props를 정의합니다. 코드는 다음과 같습니다.

<template>
  <child :message="parentMsg"/>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      parentMsg: "父组件的数据",
    };
  },
  components: {
    Child,
  },
  props: ["parentMsg"], //在父组件中定义props
};
</script>

위 코드에서 상위 컴포넌트는 props를 통해 하위 컴포넌트에 message라는 속성을 전달합니다.

그런 다음 하위 컴포넌트에서 props를 받습니다.

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true, //props接收的属性必须有值
    },
  },
};
</script>

자식 컴포넌트에서는 상위 컴포넌트가 전달한 메시지 속성이 props를 통해 수신됩니다.

이때, 상위 컴포넌트 페이지에는 "상위 컴포넌트 데이터" 값이 표시됩니다.

2. $emit

$emit은 Vue에서 하위 구성 요소가 상위 구성 요소에 메시지를 전달하는 방식입니다. 하위 구성요소에서 특정 이벤트가 발생하면 $emit를 통해 상위 구성요소의 이벤트 메소드가 트리거될 수 있습니다. $emit 메소드의 첫 번째 매개변수는 트리거될 이벤트의 이름이고, 두 번째 매개변수는 상위 컴포넌트에 전달될 매개변수입니다.

$emit 사용법: 먼저 하위 구성요소에 이벤트 메소드를 정의합니다. 이벤트가 트리거되면 $emit 메소드를 호출하여 상위 구성요소에 메시지를 전달합니다.

<template>
  <button @click="onClick">点击传递消息到父组件</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("child-msg", "子组件的数据");
    },
  },
};
</script>

위에서. 코드, 하위 구성 요소는 버튼을 클릭하면 child-msg라는 이벤트가 $emit 메소드를 통해 트리거되고 "하위 구성 요소 데이터" 매개변수가 전달됩니다.

그런 다음 상위 구성 요소에서 이 이벤트를 수신합니다.

<template>
  <div>
    <div>{{ message }}</div>
    <child @child-msg="getChildMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getChildMsg(msg) {
      this.message = msg; //监听子组件的事件，获取传递过来的参数
    },
  },
};
</script>

위 코드에서 상위 구성 요소는 @ 기호를 사용하여 하위 구성 요소의 이벤트를 수신합니다. 자식 컴포넌트가 child-msg 이벤트를 발생시키면 부모 컴포넌트는 해당 이벤트에 응답하고 getChildMsg 메소드를 통해 자식 컴포넌트가 전달한 데이터를 받아 페이지에 표시합니다.

위의 두 가지 방법을 통해 Vue에서는 상위 컴포넌트와 하위 컴포넌트 간의 통신이 가능합니다. 코드가 간결하고 이해하기 쉽고 유지 관리가 쉬워 구성 요소 개발의 효율성을 높일 수 있습니다.

위 내용은 Vue에서 상위 구성 요소와 하위 구성 요소 간의 통신을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!