Vue 컴포넌트 통신의 구현 방법은 무엇입니까?

Vue.js는 복잡한 대화형 애플리케이션을 구축하기 위한 구성 요소 기반 개발 접근 방식을 제공하는 인기 있는 프런트 엔드 프레임워크입니다. Vue에서 컴포넌트 간의 통신은 데이터를 공유하고 조정하며 개발 효율성을 높이는 데 도움이 되는 매우 중요한 부분입니다. 이 기사에서는 Vue에서 컴포넌트 통신의 여러 구현 방법을 소개하고 해당 코드 예제를 첨부합니다.

1. props 및 $emit 메소드

props 및 $emit는 Vue에서 가장 기본적이고 일반적으로 사용되는 컴포넌트 통신 메소드입니다. props는 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 데 사용되며 $emit 메서드는 하위 구성 요소에서 사용자 정의 이벤트를 트리거하고 데이터를 상위 구성 요소로 전달하는 데 사용됩니다.

예:

// 상위 구성 요소
d477f9ce7bf77f53fbcf36bec1b69b7a
195d11df26ec456eed18042b6f0d6cb65930faad49cc992ac61a996ed75e174a
// 소품을 사용하여 다음을 수행합니다. 데이터는 하위 구성 요소로 전달되고 @my-event
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
내보내기 기본값 {

data() {
  return {
    message: 'Hello Vue!'
  }
},
methods: {
  handleEvent(data) {
    console.log(data);
  }
}

}

// 하위 구성 요소 T & lt; 템플릿 & gt;

<button @click="sendMessage">发送消息</button>

& lt;/div & lt;/test & gt; rrrrrrrr

props: ['message'], // 接收父组件传递的数据
methods: {
  sendMessage() {
    this.$emit('my-event', 'Hello Parent!'); // 触发自定义事件，并传递数据给父组件
  }
}

} l & lt;/script & gt;

$ 상위 및 $children 속성

$parent 및 $children 속성은 구성 요소 내부에서 상위 또는 하위 구성 요소의 인스턴스에 액세스하는 데 사용됩니다.

예:

// 상위 구성 요소
2. d477f9ce7bf77f53fbcf36bec1b69b7a
6466b1a7b51f22d8bab890b03dde81175930faad49cc992ac61a996ed75e174a

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a

import childComponent from './ChildComponent. vue';

기본값 내보내기 {

components: {
  'child-component': childComponent
},
mounted() {
  console.log(this.$children); // 访问子组件实例
}

}
2cacc6d41bbb37262a98f745aa00fbf0

// 하위 구성 요소
d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

子组件

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

<script> 속성 및 메서드. <p><br>예: <br>// 상위 구성 요소 <p>d477f9ce7bf77f53fbcf36bec1b69b7a<br> 0b99179ca02ce884106bab61b6c70ae45930faad49cc992ac61a996ed75e174a21c97d3a051048b8e55e3c8f199a54b2<p><br>3f1c4e4b6b16bbbd69b2ee476dc4f83a 내보내기 기본값 {<p><pre class='brush:php;toolbar:false;'>mounted() { console.log(this.$parent); // 访问父组件实例 }</pre><br>}2cacc6d41bbb37262a98f745aa00fbf0<ol start="3"><li>// 하위 구성 요소 d477f9ce7bf77f53fbcf36bec1b69b7a dc6dce4a544fdca2df29d5ac0ea9906b<p><pre class='brush:php;toolbar:false;'>mounted() { console.log(this.$refs.childRef); // 获取子组件实例 this.$refs.childRef.sendMessage(); // 调用子组件的方法 }</pre>16b28748ea4df4d9c2150843fecfba68<p>21c97d3a051048b8e55e3c8f199a54b2<p>3f1c4e4b6b16bbbd69b2ee476dc4f83a<br> 내보내기 기본값 {<br><pre class='brush:php;toolbar:false;'>子组件</pre><br>}2cacc6d41bbb37262a98f745aa00fbf0<p><br>Vue 구성요소 통신을 구현하는 여러 가지 방법이 있습니다. 실제 개발에서는 특정 요구 사항과 시나리오에 따라 적절한 통신 방법을 선택하면 개발 효율성과 코드 품질을 효과적으로 향상시킬 수 있습니다. 이 글이 Vue 컴포넌트 통신을 이해하는 데 도움이 되기를 바랍니다. </script>

위 내용은 Vue 컴포넌트 통신의 구현 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!