vue3에서 작성하는 프로젝트에서는 pinia 공개 데이터 소스를 사용하는 것 외에 어떤 더 간단한 API 방법을 사용할 수 있나요? 다음으로 부모-자식 구성 요소와 자식-부모 구성 요소 간에 통신하는 여러 가지 방법을 소개하겠습니다.
부모-자식 컴포넌트와 통신할 때 가장 먼저 생각하는 것은 props입니다. 자식 컴포넌트에서 허용되는 props를 선언하고 전달합니다. 상위 컴포넌트의 해당 props에서 키와 값, 을 사용하면 하위 컴포넌트의 상위 컴포넌트에서 전달된 속성과 값을 받을 수 있습니다. [관련 권장 사항: vuejs 비디오 튜토리얼, web front-end development]
구체적인 구현은 다음과 같습니다.
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="index"> {{item}} </li> </ul> </template> <script setup> import { defineProps } from 'vue'; const props = defineProps({ list :{ type: Array, default: () => {} } }) </script>
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childrenVue :list="list"></childrenVue> </template> <script setup> import { ref } from 'vue'; import childrenVue from './children.vue'; const value = ref('') const list = ref(['javaScript', 'Html', 'CSS']) const handleAdd = () =>{ list.value.push(value.value) value = '' } </script>
위 그림과 같이 목록 배열이 상위 구성 요소는 하위 구성 요소에 표시되며 목록에 데이터를 추가하여 하위 구성 요소 데이터를 업데이트할 수도 있습니다.
prop에 대한 이야기를 마치고 두 번째로 소개하고 싶은 것은 vue3의 결합 옵션인 Provide와 Inject입니다.
project는 하위 구성 요소에서 주입할 수 있는 값을 제공하는 데 사용되는 반면, inject는 일치할 속성을 선언하고 상위 공급자의 일치를 통해 현재 구성 요소에 주입하는 데 사용됩니다. 코드는 다음과 같이 구현됩니다.
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { inject } from 'vue'; const list = inject('list') </script>
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childVue /> </template> <script setup> import childVue from "./child.vue"; const { ref, provide, readonly } = require("vue"); const value = ref('') const list = ref(['javaScript', 'HTML', 'CSS']) provide('list', readonly(list.value)) const handleAdd = () => { list.value.push(value.value) } </script>
위 그림과 같이 provide
API를 사용하여 list
키와 값을 제공합니다. list .value
를 선택하고 list, value
를 읽기 전용 속성으로 설정하여 하위 구성 요소가 상위 구성 요소의 데이터 소스를 수정하지 못하도록 합니다. 그런 다음 inject
API가 list
를 수신하고 상위 구성요소와 하위 구성요소 간의 통신을 실현했습니다. provide
API向外提供了一个 key 为 list
,值为list.value
,同时将 list,value
设置成了只读属性,防止子组件修改父组件的数据源。然后我们 inject
API接收了 list
,实现了父子组件的通信。
上面我介绍了两种父向子传值的方法,但在我们开发中,我们还会遇到子向父组件传值的情况,那我们该怎么解决呢? 第一个方法就是vue3中的 defineEmits
API,代码实现如下:
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineEmits } = require("vue"); const value = ref('') const emits = defineEmits(['add']) //父传子 // 给父组件传一个函数 const handleAdd = () => { emits('add', value.value) value.value= '' } </script>
// parent.vue <template> <childVue @add='handleAdd'/> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { ref } from '@vue/reactivity'; import childVue from './child.vue'; const list = ref(['javaScript', 'HTML', 'CSS']) const handleAdd = (val) => { list.value.push(val) } </script>
如上图所示,我们在子组件上emit
一个出了一个 add事件给父组件接收,同时在父组件上调用来执行添加的逻辑,再将 input
的value
变为空,实现了父组件向子组件传参。
在介绍完 defineEmits
后, 我们再来介绍一种与其有异曲同工之处的v-model:xxx + emit
的方法,实现如下:
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineProps, defineEmits } = require("vue"); const value = ref('') const props = defineProps({ list: { type: Array, default: () => [] } }) const emits = defineEmits(['list']) // 给父组件一点东西 const handleAdd = () => { // props.list.push(value.value) //不建议直接修改props的值 把握不住数据源的流转 const arr = props.list arr.push(value.value) emits('list', arr) value.value= '' } </script>
<template> <childVue v-model:list="list" @list ='add'/> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { ref } from '@vue/reactivity'; import childVue from './child.vue'; const list = ref(['javaScript', 'HTML', 'CSS']) const add =(val) => { console.log(val); console.log(list); } </script>
再和上面的defineEmits
方法比较完以后,相信大家也看出了这两者的异曲同工在哪了。我们这里是先将父组件的list
传给了子组件,再在子组件修改了父组件的数据源,同时再emit
부모에서 자식으로 값을 전달하는 두 가지 방법을 도입했습니다. 하지만 개발 과정에서 자식이 부모 컴포넌트에 값을 전달하는 상황도 발생하게 되는데 어떻게 해결해야 할까요? 첫 번째 방법은 vue3의 defineEmits
API입니다. 코드 구현은 다음과 같습니다: rrreeerrreee
emit
전송하여 수신합니다. it 을 호출하고 동시에 상위 구성요소에서 호출하여 추가된 로직을 실행한 다음 input
의 값
을 공백으로 변경하여 상위 구성요소 전달을 실현합니다. 하위 구성요소에 대한 매개변수입니다. 🎜defineEmits
를 소개한 후, 이와 유사한 를 소개하겠습니다. v-의 방법 model:xxx + Emit
은 다음과 같이 구현됩니다: 🎜rrreeerrreee🎜🎜🎜위의 defineEmits
메소드와 비교해보면 모두가 둘 사이의 유사점을 알 수 있을 것이라고 믿습니다. 여기서는 먼저 상위 구성 요소의 목록
을 하위 구성 요소에 전달한 다음 하위 구성 요소에서 상위 구성 요소의 데이터 소스를 수정하고 동시에 emit
반환을 반환합니다. 이를 달성하기 위해 상위 구성요소에 하위 구성요소는 값을 상위 구성요소에 전달합니다. 🎜🎜 (학습 영상 공유: 🎜vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜위 내용은 vue3 구성 요소 간에 통신하는 방법은 무엇입니까? 의사소통 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!