Vue 문서에서 인접 컴포넌트 값 전달 함수 구현 방법

Vue는 널리 사용되는 프런트 엔드 프레임워크로서 구성 요소 간 값 전달 기능을 구현해야 하는 경우가 많습니다. 그 중 인접한 컴포넌트의 값을 전달할 때에는 주로 해당 컴포넌트의 메소드를 호출하여 구현한다. 이 글에서는 Vue에서 인접 컴포넌트 값 전달 함수의 구현 방법을 소개합니다.

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

Vue에서는 v-bind 명령을 사용하여 상위 구성 요소의 값을 하위 구성 요소에 바인딩합니다. 구체적인 구현 코드는 다음과 같습니다.

상위 컴포넌트에서:

<template>
  <div>
    <child-component v-bind:data="parentData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  data: {
    parentData: 'Hello, Vue!'
  }
}
</script>

하위 컴포넌트에서:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

위 코드는 v-를 통해 상위 컴포넌트 <code>parentData의 데이터를 전달합니다. 바인딩:데이터 하위 구성 요소의 data 속성에 바인딩합니다. parentData 通过 v-bind:data 绑定到子组件的 data 属性中。

2.子组件向父组件传递值

在Vue中，子组件需要通过 $emit 方法向父组件发送一个事件。在父组件中注册该事件，并在回调函数中处理子组件发送的数据。具体实现代码如下：

在父组件中：

<template>
  <div>
    <child-component v-on:send-data="handleChildData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  methods: {
    handleChildData(data) {
      console.log(data);
    }
  }
}
</script>

在子组件中：

<template>
  <div>
    <button v-on:click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Hello, Parent!');
    }
  }
}
</script>

上述代码中，子组件通过 v-on:click 绑定 sendDataToParent 方法，在方法中通过 $emit 方法向父组件发送事件 send-data 并传递数据 Hello, Parent! 。在父组件中，通过 v-on:send-data 注册事件 send-data 的回调函数 handleChildData ，并在函数中处理子组件传回的参数。

3.兄弟组件之间传递值

兄弟组件之间传递数据时，需要通过父组件作为中间桥梁。具体实现代码如下：

在父组件中：

<template>
  <div>
    <brother-component1 v-on:update-data="handleBrotherData"></brother-component1>
    <br>
    <brother-component2 v-bind:data="parentData"></brother-component2>
  </div>
</template>

<script>
import brotherComponent1 from './brotherComponent1.vue';
import brotherComponent2 from './brotherComponent2.vue';
export default {
  components: {
    brotherComponent1,
    brotherComponent2
  },
  data: {
    parentData: ''
  },
  methods: {
    handleBrotherData(data) {
      this.parentData = data;
    }
  }
}
</script>

在子组件1中：

<template>
  <div>
    <button v-on:click="sendDataToBrother">向兄弟组件2传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToBrother() {
      this.$emit('update-data', 'Hello, Brother 2!');
    }
  }
}
</script>

在子组件2中：

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

上述代码中，子组件1向父组件发送事件 update-data 并传递数据 Hello, Brother 2! ；父组件中监听该事件 v-on:update-data 并在函数中处理数据 handleBrotherData ，并将处理后的数据通过 v-bind:data 绑定到子组件2的 data

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

Vue에서 하위 구성 요소는 $emit 메서드를 통해 상위 구성 요소에 이벤트를 보내야 합니다. 상위 구성요소에 이벤트를 등록하고 콜백 함수에서 하위 구성요소가 보낸 데이터를 처리합니다. 구체적인 구현 코드는 다음과 같습니다. 🎜🎜상위 컴포넌트에서: 🎜rrreee🎜하위 컴포넌트에서: 🎜rrreee🎜위 코드에서 하위 컴포넌트는 v-on을 통해 <code>sendDataToParent를 바인딩합니다. :click code> 메서드, send-data 이벤트가 $emit 메서드를 통해 상위 구성 요소로 전송되고 데이터가 전달됩니다. 안녕하세요, 학부모님!. 상위 구성 요소에서 v-on:send-data를 통해 send-data 이벤트의 콜백 함수 handleChildData를 등록하고 하위 항목을 처리합니다. 구성요소가 반환한 함수 매개변수에 있습니다. 🎜🎜3. 형제 구성 요소 간 값 전송🎜🎜형제 구성 요소 간에 데이터를 전송할 때는 상위 구성 요소를 중간 브리지로 사용해야 합니다. 구체적인 구현 코드는 다음과 같습니다. 🎜🎜상위 컴포넌트에서: 🎜rrreee🎜 하위 컴포넌트 1에서: 🎜rrreee🎜 하위 컴포넌트 2에서: 🎜rrreee🎜위 코드에서 하위 컴포넌트 1은 이벤트 update-를 상위 구성 요소 데이터로 전달하고 Hello, Brother 2! 데이터를 전달합니다. 상위 구성 요소는 v-on:update-data 이벤트를 수신합니다. handleBrotherData 함수에서 데이터를 처리하고 처리된 데이터를 v-bind:data를 통해 하위 구성 요소 2의 data 속성에 바인딩합니다. 🎜🎜결론적으로 Vue에서 인접 컴포넌트의 값 전달 기능 구현 방법은 주로 상위 컴포넌트와 하위 컴포넌트 간의 값 바인딩 및 이벤트 통신을 통해 완성됩니다. 상위 구성 요소는 형제 구성 요소 간의 중간 브리지로 사용됩니다. 이 방법은 간단하고 이해하기 쉽고 유연하고 편리하며 Vue에서 매우 중요한 컴포넌트 통신 방법입니다. 🎜

위 내용은 Vue 문서에서 인접 컴포넌트 값 전달 함수 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!