유용한 정보 공유: Vue3 구성 요소와 통신하는 7가지 방법!
- 青灯夜游앞으로
- 2022-02-16 10:20:322616검색
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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</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 'vue'
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 'vue'
const value = ref('')
const emits = defineEmits(['add'])
const handleSubmit = () => {
emits('add', value.value)
value.value = ''
}
</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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
// 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 'vue'
const value = ref('')
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
const emits = defineEmits(['update:list'])
// 添加操作
const handleAdd = () => {
const arr = props.list
arr.push(value.value)
emits('update:list', arr)
value.value = ''
}
</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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
</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 'vue'
import ChildComponents from './child.vue'
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 'vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
defineExpose({ list })
</script>setup组件默认是关闭的，也即通过模板ref获取到的组件的公开实例，不会暴露任何在**<script setup></script>中声明的绑定。如果需要公开需要通过****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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// 向子组件提供数据
provide('list', list.value)
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</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 'vue'
// 接受父组件提供的数据
const list = inject('list')
</script>值得注意的是使用provide进行数据传递时，尽量readonly참고: php 중국어 온라인 작업도 최신 버전의 vue 과정을 가르치기 시작했습니다. 관심있는 친구들은 더 많은 것을 배울 수 있습니다.
- props
- emit
- v-model
- refs
- 제공/주입
- eventBus
- vuex/pinia(상태 관리 도구)
🎜🎜위 그림, List 및 Input Box는 각각 상위 구성 요소와 하위 구성 요소입니다. 값 전송 방법에 따라 누가 상위 구성 요소이고 누가 상위 구성 요소인지, 하위 구성 요소가 누구인지 조정될 수 있습니다. 🎜1. Props 방법
🎜Props 방법은 Vue에서 아버지에서 아들에게 전달🎜하는 가장 일반적인 방법입니다. 사용도 비교적 간단합니다. [관련 권장사항: vue.js 동영상 튜토리얼] 🎜🎜위 데모에 따르면 , 상위 구성 요소의 데이터에 대한 데이터 및 작업을 정의하고 하위 구성 요소는 목록만 렌더링합니다. 🎜🎜상위 구성 요소 코드는 다음과 같습니다. 🎜rrreee🎜 하위 구성 요소는 상위 구성 요소가 전달한 값만 렌더링하면 됩니다. 🎜rrreee2. 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 지정된 이벤트를 추가합니다. 🎜🎜참고:🎜상위 컴포넌트에서 사용하는 방법은 비교적 간단합니다. 🎜rrreeeupdate:*는 Vue에서 고정된 쓰기 방법이고*는props의 속성 이름을 나타냅니다. 🎜
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
(학습 영상 공유 :