유용한 정보 공유: Vue3 구성 요소와 통신하는 7가지 방법!

Component는 Vue의 핵심 기능이며 재사용 가능한 Vue 인스턴스이지만 구성 요소 인스턴스의 범위는 서로 독립적입니다. 즉, 서로 다른 구성 요소 간의 데이터가 서로 직접 참조할 수 없습니다. 그렇다면 구성 요소 간에 데이터를 연결하는 방법은 무엇입니까? 데이터를 통신하고 전송하는 방법은 무엇입니까? 다음 기사에서는 7가지 구성요소 통신 방법을 공유하겠습니다. 도움이 되기를 바랍니다.

이 글에서는 <script setup></script>의 결합 API 작성 방법을 채택했습니다. 옵션 유형에 비해 결합 API 작성 방법이 무료이므로 더 편리합니다. 자세한 내용은 Vue 문서는 두 가지 방법을 설명합니다. <script setup></script>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。

注：php中文网线上班也开始教授最新版本的vue课程了，感兴趣的朋友可以了解学习。

本篇文章将介绍如下七种组件通信方式：

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• vuex/pinia(状态管理工具)

开始搞事情~

举一个栗子

俗话说的好，学习不写demo，那就是耍流氓~

本篇文章将围绕下面这个demo，如下图所示：

上图中，列表和输入框分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所调整。

1、Props方式

Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。【相关推荐：vue.js视频教程】

根据上面的demo，我们将数据以及对数据的操作定义在父组件，子组件仅做列表的一个渲染；

父组件代码如下：

<template>
  <!-- 子组件 -->
  <child-components :list="list"></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子组件只需要对父组件传递的值进行渲染即可，代码如下：

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in props.list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from &#39;vue&#39;
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

2、emit方式

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父；

根据上面的demo，我们将列表定义在父组件，子组件只需要传递添加的值即可。

子组件代码如下：

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleSubmit" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from &#39;vue&#39;
const value = ref(&#39;&#39;)
const emits = defineEmits([&#39;add&#39;])
const handleSubmit = () => {
  emits(&#39;add&#39;, value.value)
  value.value = &#39;&#39;
}
</script>

在子组件中点击【添加】按钮后，emit一个自定义事件，并将添加的值作为参数传递。

父组件代码如下：

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components @add="handleAdd"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
// add 触发后的事件处理函数
const handleAdd = value => {
  list.value.push(value)
}
</script>

在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作。

3、v-model方式

v-model是Vue中一个比较出色的语法糖，就比如下面这段代码

<ChildComponent v-model:title="pageTitle" />

就是下面这段代码的简写形势

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-model确实简便了不少，现在我们就来看一下上面那个demo，如何用v-model实现。

子组件

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, defineProps } from &#39;vue&#39;
const value = ref(&#39;&#39;)
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits([&#39;update:list&#39;])
// 添加操作
const handleAdd = () => {
  const arr = props.list
  arr.push(value.value)
  emits(&#39;update:list&#39;, arr)
  value.value = &#39;&#39;
}
</script>

在子组件中我们首先定义props和emits，然后添加完成之后emit指定事件。

注：update:*是Vue中的固定写法，*表示props中的某个属性名。

父组件中使用就比较简单，代码如下：

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components v-model:list="list"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
</script>

4、refs方式

在使用选项式API时，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用哪种方式获取。如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。

示例代码如下：

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in childRefs?.list" :key="i">
      {{ i }}
    </li>
  </ul>
  <!-- 子组件 ref的值与<script>中的保持一致 -->
  <child-components ref="childRefs"></child-components>
  <!-- 父组件 -->
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const childRefs = ref(null)
</script>

子组件代码如下：

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineExpose } from &#39;vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
defineExpose({ list })
</script>

setup组件默认是关闭的，也即通过模板ref获取到的组件的公开实例，不会暴露任何在**<script setup>中声明的绑定。如果需要公开需要通过****defineExpose**** API暴露**。

5、provide/inject方式

provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。示例代码如下所示：

父组件

<template>
  <!-- 子组件 -->
  <child-components></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, provide } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// 向子组件提供数据
provide(&#39;list&#39;, list.value)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子组件

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { inject } from &#39;vue&#39;
// 接受父组件提供的数据
const list = inject(&#39;list&#39;)
</script>

值得注意的是使用provide进行数据传递时，尽量readonly

참고: php 중국어 온라인 작업도 최신 버전의 vue 과정을 가르치기 시작했습니다. 관심있는 친구들은 더 많은 것을 배울 수 있습니다.

🎜이 글에서는 다음과 같은 7가지 구성요소 통신 방법을 소개합니다: 🎜

• props
• emit
• v-model
• refs
• 제공/주입
• eventBus
• vuex/pinia(상태 관리 도구)

🎜일을 시작하세요~🎜밤을 주세요🎜배우면서 데모를 안쓰면 훌리건이라는 말이 있죠~🎜🎜이 글에서는 다음에 중점을 둘 것입니다 아래 그림과 같은 데모:🎜 🎜🎜🎜위 그림, List 및 Input Box는 각각 상위 구성 요소와 하위 구성 요소입니다. 값 전송 방법에 따라 누가 상위 구성 요소이고 누가 상위 구성 요소인지, 하위 구성 요소가 누구인지 조정될 수 있습니다. 🎜

1. Props 방법

🎜Props 방법은 Vue에서 아버지에서 아들에게 전달🎜하는 가장 일반적인 방법입니다. 사용도 비교적 간단합니다. [관련 권장사항: vue.js 동영상 튜토리얼] 🎜🎜위 데모에 따르면 , 상위 구성 요소의 데이터에 대한 데이터 및 작업을 정의하고 하위 구성 요소는 목록만 렌더링합니다. 🎜🎜상위 구성 요소 코드는 다음과 같습니다. 🎜rrreee🎜 하위 구성 요소는 상위 구성 요소가 전달한 값만 렌더링하면 됩니다. 🎜rrreee

2. Emit 메서드

🎜emit 메서드도 Vue에서 가장 일반적인 컴포넌트 통신 방법입니다. . 이 방법은 sub-Pass to parent🎜에 사용됩니다.🎜🎜위 데모에 따르면 상위 구성 요소에 목록을 정의하고 하위 구성 요소는 추가된 값만 전달하면 됩니다. 🎜🎜하위 컴포넌트 코드는 다음과 같습니다. 🎜rrreee🎜하위 컴포넌트에서 [추가] 버튼을 클릭한 후 커스텀 이벤트를 emit하고 추가된 값을 파라미터로 전달합니다. 🎜🎜상위 컴포넌트의 코드는 다음과 같습니다. 🎜rrreee🎜상위 컴포넌트에서는 하위 컴포넌트의 사용자 정의 이벤트만 수신한 후 해당 추가 작업을 수행하면 됩니다. 🎜

3. v-model 방법

🎜v-model은 다음 코드와 같이 Vue의 훌륭한 구문 설탕입니다 🎜rrreee🎜 아래 코드의 약어입니다🎜rrreee🎜v-model는 실제로 훨씬 간단합니다. 이제 위의 데모와 이를 구현하기 위해 v-model을 사용하는 방법을 살펴보겠습니다. 🎜🎜하위 구성 요소🎜rrreee🎜하위 구성 요소에서는 먼저 props 및 emis를 정의한 다음 emit 지정된 이벤트를 추가합니다. 🎜

🎜참고: update:*는 Vue에서 고정된 쓰기 방법이고 *는 props의 속성 이름을 나타냅니다. 🎜

🎜상위 컴포넌트에서 사용하는 방법은 비교적 간단합니다. 🎜rrreee

4.refs 메소드

🎜옵션을 사용하는 경우 API에서는 지정된 요소나 구성 요소를 가져오는 데 사용되는 this.$refs.name을 전달할 수 있지만 이 메서드는 결합된 API에서 사용할 수 없습니다. ref를 통해 구성 요소나 요소를 얻으려면 구성 요소가 마운트된 후 액세스할 수 있는 동일한 이름의 Ref 객체를 정의해야 합니다. 🎜🎜샘플 코드는 다음과 같습니다. 🎜rrreee🎜하위 구성 요소 코드는 다음과 같습니다. 🎜rrreee🎜setup 구성 요소는 기본적으로 닫혀 있습니다. 즉, 를 통해 얻은 구성 요소의 공용 인스턴스입니다. ref 템플릿은🎜**<script setup></script>에서 선언된 바인딩 🎜을 노출하지 않습니다. 🎜노출이 필요한 경우 ****defineExpose**** API**를 통해 노출해야 합니다. 🎜

5. 제공/주입 방법

🎜provide와 inject는 Vue에서 제공하는 API 쌍입니다. 이 API를 사용하면 상위 구성 요소가 하위 구성 요소에 데이터를 전달할 수 있으며, 수준이 아무리 깊어도 이 API 쌍을 통해 구현할 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜🎜상위 구성 요소🎜rrreee🎜하위 구성 요소🎜rrreee🎜데이터 전송을 위해 provide를 사용할 때 읽기 전용을 시도한다는 점에 유의할 가치가 있습니다. > 데이터 전송 패키징을 위해 하위 구성 요소가 상위 구성 요소에 의해 전달된 데이터를 수정하는 것을 방지합니다🎜. 🎜

6. 이벤트 버스

이벤트 버스는 Vue3에서 제거되었지만 타사 도구를 사용하여 수행할 수 있습니다. Vue는 공식적으로 mitt 또는 tiny-emitter를 권장하지 않습니다. 대부분의 경우 버스 방식은 컴포넌트 통신을 구현하기에는 상대적으로 간단하고 조잡하지만 이벤트 버스를 유지하는 것은 장기적으로 큰 문제이므로 여기서는 자세한 내용을 설명하지 않겠습니다. tool

7. 상태 관리 도구

Vuex

및 Pinia는 Vue3의 상태 관리 도구입니다. 이 두 도구는 상대적으로 강력하므로 여기에는 표시하지 않습니다. 자세한 내용은 문서를 확인하세요 마지막에 작성되었습니다

이 기사는 여기서 끝납니다. 일반적으로 비교적 간단하고 복잡한 것이 없습니다.

이 글이 도움이 되셨다면 좋아요와 댓글, 저장해 주시고 필요할 때 찾지 못하게 해주세요.

글 내용에 오류가 있으면 정정해주세요~

원본 주소 : https://juejin.cn/post/7062740057018335245

저자 : Yiwan Zhou

(학습 영상 공유 :

웹 프론트- 튜토리얼 종료

)