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