Component는 Vue의 핵심 기능이며 재사용 가능한 Vue 인스턴스이지만 구성 요소 인스턴스의 범위는 서로 독립적입니다. 즉, 서로 다른 구성 요소 간의 데이터가 서로 직접 참조할 수 없습니다. 그렇다면 구성 요소 간에 데이터를 연결하는 방법은 무엇입니까? 데이터를 통신하고 전송하는 방법은 무엇입니까? 다음 기사에서는 7가지 구성요소 통신 방법을 공유하겠습니다. 도움이 되기를 바랍니다.
이 글에서는 <script setup></script>
의 결합 API 작성 방법을 채택했습니다. 옵션 유형에 비해 결합 API 작성 방법이 무료이므로 더 편리합니다. 자세한 내용은 Vue 문서는 두 가지 방법을 설명합니다. <script setup></script>
这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述。
注:php中文网线上班也开始教授最新版本的vue课程了,感兴趣的朋友可以了解学习。
本篇文章将介绍如下七种组件通信方式:
开始搞事情~
俗话说的好,学习不写demo,那就是耍流氓~
本篇文章将围绕下面这个demo,如下图所示:
上图中,列表和输入框分别是父子组件,根据不同传值方式,可能谁是父组件谁是子组件会有所调整。
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>
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>
在父组件中只需要监听子组件自定义的事件,然后执行对应的添加操作。
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>
在使用选项式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>
中声明的绑定。如果需要公开需要通过****defineExpose
**** API暴露**。
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
방법은 Vue에서 아버지에서 아들에게 전달🎜하는 가장 일반적인 방법입니다. 사용도 비교적 간단합니다. [관련 권장사항: vue.js 동영상 튜토리얼] 🎜🎜위 데모에 따르면 , 상위 구성 요소의 데이터에 대한 데이터 및 작업을 정의하고 하위 구성 요소는 목록만 렌더링합니다. 🎜🎜상위 구성 요소 코드는 다음과 같습니다. 🎜rrreee🎜 하위 구성 요소는 상위 구성 요소가 전달한 값만 렌더링하면 됩니다. 🎜rrreeeemit
메서드도 Vue에서 가장 일반적인 컴포넌트 통신 방법입니다. . 이 방법은 sub-Pass to parent🎜에 사용됩니다.🎜🎜위 데모에 따르면 상위 구성 요소에 목록을 정의하고 하위 구성 요소는 추가된 값만 전달하면 됩니다. 🎜🎜하위 컴포넌트 코드는 다음과 같습니다. 🎜rrreee🎜하위 컴포넌트에서 [추가] 버튼을 클릭한 후 커스텀 이벤트를 emit
하고 추가된 값을 파라미터로 전달합니다. 🎜🎜상위 컴포넌트의 코드는 다음과 같습니다. 🎜rrreee🎜상위 컴포넌트에서는 하위 컴포넌트의 사용자 정의 이벤트만 수신한 후 해당 추가 작업을 수행하면 됩니다. 🎜v-model
은 다음 코드와 같이 Vue의 훌륭한 구문 설탕입니다 🎜rrreee🎜 아래 코드의 약어입니다🎜rrreee🎜v-model
는 실제로 훨씬 간단합니다. 이제 위의 데모와 이를 구현하기 위해 v-model을 사용하는 방법을 살펴보겠습니다. 🎜🎜하위 구성 요소🎜rrreee🎜하위 구성 요소에서는 먼저 props
및 emis
를 정의한 다음 emit
지정된 이벤트를 추가합니다. 🎜🎜참고:🎜상위 컴포넌트에서 사용하는 방법은 비교적 간단합니다. 🎜rrreeeupdate:*
는 Vue에서 고정된 쓰기 방법이고*
는props
의 속성 이름을 나타냅니다. 🎜
this.$refs.name
을 전달할 수 있지만 이 메서드는 결합된 API에서 사용할 수 없습니다. ref
를 통해 구성 요소나 요소를 얻으려면 구성 요소가 마운트된 후 액세스할 수 있는 동일한 이름의 Ref 객체를 정의해야 합니다. 🎜🎜샘플 코드는 다음과 같습니다. 🎜rrreee🎜하위 구성 요소 코드는 다음과 같습니다. 🎜rrreee🎜setup
구성 요소는 기본적으로 닫혀 있습니다. 즉, 를 통해 얻은 구성 요소의 공용 인스턴스입니다. ref
템플릿은🎜**<script setup></script>
에서 선언된 바인딩 🎜을 노출하지 않습니다. 🎜노출이 필요한 경우 ****defineExpose
**** API**를 통해 노출해야 합니다. 🎜provide
와 inject
는 Vue에서 제공하는 API 쌍입니다. 이 API를 사용하면 상위 구성 요소가 하위 구성 요소에 데이터를 전달할 수 있으며, 수준이 아무리 깊어도 이 API 쌍을 통해 구현할 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜🎜상위 구성 요소🎜rrreee🎜하위 구성 요소🎜rrreee🎜데이터 전송을 위해 provide
를 사용할 때 읽기 전용
을 시도한다는 점에 유의할 가치가 있습니다. > 데이터 전송 패키징을 위해 하위 구성 요소가 상위 구성 요소에 의해 전달된 데이터를 수정하는 것을 방지합니다🎜. 🎜이벤트 버스는 Vue3에서 제거되었지만 타사 도구를 사용하여 수행할 수 있습니다. Vue는 공식적으로 mitt 또는 tiny-emitter를 권장하지 않습니다. 대부분의 경우 버스 방식은 컴포넌트 통신을 구현하기에는 상대적으로 간단하고 조잡하지만 이벤트 버스를 유지하는 것은 장기적으로 큰 문제이므로 여기서는 자세한 내용을 설명하지 않겠습니다. tool
7. 상태 관리 도구
Vuex및 Pinia는 Vue3의 상태 관리 도구입니다. 이 두 도구는 상대적으로 강력하므로 여기에는 표시하지 않습니다. 자세한 내용은 문서를 확인하세요 마지막에 작성되었습니다
이 글이 도움이 되셨다면 좋아요와 댓글, 저장해 주시고 필요할 때 찾지 못하게 해주세요.
글 내용에 오류가 있으면 정정해주세요~
원본 주소 : https://juejin.cn/post/7062740057018335245웹 프론트- 튜토리얼 종료저자 : Yiwan Zhou
(학습 영상 공유 :