Vue 문서의 상위-하위 구성요소 값 전달 기능 소개

Vue는 사용자 인터페이스를 구축하는 쉽고 편리한 방법을 제공하는 인기 있는 JavaScript 프레임워크입니다. Vue에서 컴포넌트는 애플리케이션을 구축하기 위한 기본 단위입니다. 구성 요소는 다른 구성 요소 내에 중첩되어 상위-하위 관계를 형성할 수 있습니다. 구성 요소 간의 통신은 Vue 애플리케이션의 중요한 측면, 특히 상위 구성 요소와 하위 구성 요소 간의 통신입니다. Vue에서는 상위 구성 요소를 통해 속성이나 메서드를 전달하여 상위 구성 요소와 하위 구성 요소 간의 통신을 달성할 수 있습니다. 이 기사에서는 Vue 문서의 상위-하위 구성 요소 값 전달 기능을 소개합니다.

상위 구성 요소는 속성을 하위 구성 요소에 전달합니다.

Vue에서 속성은 상위 구성 요소와 하위 구성 요소 간의 가장 기본적인 통신 방법 중 하나입니다. 상위 구성 요소는 하위 구성 요소의 props 옵션을 통해 하위 구성 요소에 속성을 전달합니다. 하위 구성 요소의 props 옵션은 하위 구성 요소가 허용할 수 있는 속성 목록이 포함된 배열을 선언합니다. 그러면 하위 구성 요소는 마치 로컬 상태를 읽는 것처럼 이러한 속성에 액세스할 수 있습니다.

다음 코드는 Vue에서 하위 구성 요소에 속성을 전달하는 방법을 보여줍니다.

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "Hello from parent component"
    };
  }
};
</script>

이 예에서는 상위 구성 요소에서 하위 구성 요소로 속성을 전달하는 방법이 사용됩니다. 그 중 parentMessage 속성은 상위 구성 요소에 정의된 후 하위 구성 요소인 child-comComponent의 message 속성에 바인딩됩니다. 하위 구성 요소가 속성을 받으면 구성 요소 내에서 해당 속성을 사용할 수 있습니다. parentMessage，然后将其绑定到子组件child-component的message属性上。当子组件接受到属性时，在组件内就可以使用该属性。

子组件向父组件传递事件

Vue中的另一种常见的父子组件之间的通信方式是通过子组件向父组件传递事件。子组件可以通过$emit方法触发自定义事件，并将数据作为参数传递给父组件。

以下代码展示了如何在Vue中实现子组件向父组件传递事件：

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit("button-clicked", "button clicked from child component");
    }
  }
};
</script>

在这个例子中，子组件采用click事件触发handleClick方法，该方法使用this.$emit方法向父组件传递了名称为button-clicked的自定义事件。在父组件中，可使用v-on指令监听该事件并执行回调函数。

<template>
  <div>
    <child-component @button-clicked="handleButtonClick"></child-component>
    <p> Message from child component: {{ messageFromChild }}</p>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ""
    };
  },
  methods: {
    handleButtonClick(data) {
      this.messageFromChild = data;
    }
  }
};
</script>

在这个例子中，父组件使用v-on指令监听子组件的点击事件button-clicked

하위 구성 요소는 이벤트를 상위 구성 요소에 전달합니다

Vue의 상위 구성 요소와 하위 구성 요소 간의 또 다른 일반적인 통신 방법은 하위 구성 요소를 통해 상위 구성 요소에 이벤트를 전달하는 것입니다. 하위 구성요소는 $emit 메소드를 통해 사용자 정의 이벤트를 트리거하고 데이터를 상위 구성요소에 매개변수로 전달할 수 있습니다.

다음 코드는 Vue의 상위 구성 요소에 이벤트를 전달하기 위해 하위 구성 요소를 구현하는 방법을 보여줍니다. 🎜rrreee🎜이 예에서 하위 구성 요소는 click 이벤트를 사용하여 handleClick 메서드를 트리거합니다. this를 사용합니다. .$emit 메소드는 button-clicked라는 사용자 정의 이벤트를 상위 구성 요소에 전달합니다. 상위 구성 요소에서는 v-on 지시어를 사용하여 이벤트를 수신하고 콜백 함수를 실행할 수 있습니다. 🎜rrreee🎜이 예에서 상위 구성 요소는 v-on 지시문을 사용하여 하위 구성 요소의 button-clicked 클릭 이벤트를 수신하고, 전달된 데이터를 사용합니다. 콜백 함수의 하위 구성요소를 사용하여 상위 구성요소의 상태를 업데이트합니다. 🎜🎜요약🎜🎜상위 구성 요소와 하위 구성 요소 간의 통신은 Vue 애플리케이션의 중요한 측면입니다. Vue 문서에는 상위 구성 요소와 하위 구성 요소 간의 통신을 구현하는 여러 가지 방법이 제공됩니다. 이 기사에서는 두 가지 통신 방법, 즉 상위 구성 요소가 하위 구성 요소에 속성을 전달하는 방법과 하위 구성 요소가 이벤트를 상위 구성 요소에 전달하는 방법을 소개합니다. 이러한 방법을 통해 개발자는 복잡한 Vue 구성 요소를 쉽게 구축할 수 있습니다. Vue의 구성 요소 통신에 대해 자세히 알아보려면 Vue의 공식 문서를 자세히 읽어보세요. 🎜

위 내용은 Vue 문서의 상위-하위 구성요소 값 전달 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!