vue3 구성 요소 간에 통신하는 방법은 무엇입니까? 의사소통 방법에 대한 간략한 분석

vue3에서 작성하는 프로젝트에서는 pinia 공개 데이터 소스를 사용하는 것 외에 어떤 더 간단한 API 방법을 사용할 수 있나요? 다음으로 부모-자식 구성 요소와 자식-부모 구성 요소 간에 통신하는 여러 가지 방법을 소개하겠습니다.

1. 부모-자식 컴포넌트 통신

1.1 DefineProps

부모-자식 컴포넌트와 통신할 때 가장 먼저 생각하는 것은 props입니다.자식 컴포넌트에서 허용되는 props를 선언하고 전달합니다. 상위 컴포넌트의 해당 props에서 키와 값,을 사용하면 하위 컴포넌트의 상위 컴포넌트에서 전달된 속성과 값을 받을 수 있습니다. [관련 권장 사항:vuejs 비디오 튜토리얼,web front-end development]

구체적인 구현은 다음과 같습니다.

// children.vue  

// parent.vue  

위 그림과 같이 목록 배열이 상위 구성 요소는 하위 구성 요소에 표시되며 목록에 데이터를 추가하여 하위 구성 요소 데이터를 업데이트할 수도 있습니다.

1.2 Provide/inject

prop에 대한 이야기를 마치고 두 번째로 소개하고 싶은 것은 vue3의 결합 옵션인 Provide와 Inject입니다.

project는 하위 구성 요소에서 주입할 수 있는 값을 제공하는 데 사용되는 반면, inject는 일치할 속성을 선언하고 상위 공급자의 일치를 통해 현재 구성 요소에 주입하는 데 사용됩니다.코드는 다음과 같이 구현됩니다.

// children.vue  

// parent.vue  

위 그림과 같이provideAPI를 사용하여list키와 값을 제공합니다.list .value를 선택하고list, value를 읽기 전용 속성으로 설정하여 하위 구성 요소가 상위 구성 요소의 데이터 소스를 수정하지 못하도록 합니다. 그런 다음injectAPI가list를 수신하고 상위 구성요소와 하위 구성요소 간의 통신을 실현했습니다.provideAPI向外提供了一个 key 为list，值为list.value，同时将list,value设置成了只读属性，防止子组件修改父组件的数据源。然后我们injectAPI接收了list，实现了父子组件的通信。

2.子父组件通信

2.1 defineEmits

上面我介绍了两种父向子传值的方法，但在我们开发中，我们还会遇到子向父组件传值的情况，那我们该怎么解决呢？ 第一个方法就是vue3中的defineEmitsAPI，代码实现如下:

// children.vue  

// parent.vue  

如上图所示，我们在子组件上emit一个出了一个 add事件给父组件接收，同时在父组件上调用来执行添加的逻辑，再将input的value变为空，实现了父组件向子组件传参。

2.2 v-model:xxx + emit

在介绍完defineEmits后, 我们再来介绍一种与其有异曲同工之处的v-model:xxx + emit的方法，实现如下：

// children.vue  

再和上面的defineEmits方法比较完以后，相信大家也看出了这两者的异曲同工在哪了。我们这里是先将父组件的list传给了子组件，再在子组件修改了父组件的数据源，同时再emit

2. 자식-부모 구성 요소 통신

2.1 DefineEmits

부모에서 자식으로 값을 전달하는 두 가지 방법을 도입했습니다. 하지만 개발 과정에서 자식이 부모 컴포넌트에 값을 전달하는 상황도 발생하게 되는데 어떻게 해결해야 할까요? 첫 번째 방법은 vue3의defineEmitsAPI입니다. 코드 구현은 다음과 같습니다:rrreeerrreee

2.2 v-model:xxx +emitdefineEmits를 소개한 후, 이와 유사한를 소개하겠습니다. v-의 방법 model:xxx + Emit은 다음과 같이 구현됩니다: rrreeerrreee위의defineEmits메소드와 비교해보면 모두가 둘 사이의 유사점을 알 수 있을 것이라고 믿습니다. 여기서는 먼저 상위 구성 요소의목록을 하위 구성 요소에 전달한 다음 하위 구성 요소에서 상위 구성 요소의 데이터 소스를 수정하고 동시에emit반환을 반환합니다. 이를 달성하기 위해 상위 구성요소에 하위 구성요소는 값을 상위 구성요소에 전달합니다. (학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

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