vue3 구성 요소 간에 통신하는 방법은 무엇입니까? 의사소통 방법에 대한 간략한 분석
- 青灯夜游앞으로
- 2023-04-21 19:53:461618검색
vue3에서 작성하는 프로젝트에서는 pinia 공개 데이터 소스를 사용하는 것 외에 어떤 더 간단한 API 방법을 사용할 수 있나요? 다음으로 부모-자식 구성 요소와 자식-부모 구성 요소 간에 통신하는 여러 가지 방법을 소개하겠습니다.
1. 부모-자식 컴포넌트 통신
1.1 DefineProps
부모-자식 컴포넌트와 통신할 때 가장 먼저 생각하는 것은 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>
위 그림과 같이 목록 배열이 상위 구성 요소는 하위 구성 요소에 표시되며 목록에 데이터를 추가하여 하위 구성 요소 데이터를 업데이트할 수도 있습니다.
1.2 Provide/inject
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를 읽기 전용 속성으로 설정하여 하위 구성 요소가 상위 구성 요소의 데이터 소스를 수정하지 못하도록 합니다. 그런 다음 injectAPI가 list를 수신하고 상위 구성요소와 하위 구성요소 간의 통신을 실현했습니다. provide API向外提供了一个 key 为 list，值为list.value，同时将 list,value 设置成了只读属性，防止子组件修改父组件的数据源。然后我们 injectAPI接收了 list，实现了父子组件的通信。
2.子父组件通信
2.1 defineEmits
上面我介绍了两种父向子传值的方法，但在我们开发中，我们还会遇到子向父组件传值的情况，那我们该怎么解决呢？ 第一个方法就是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变为空，实现了父组件向子组件传参。
2.2 v-model:xxx + emit
在介绍完 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
2. 자식-부모 구성 요소 통신2.1 DefineEmits
위 그림과 같이 부모 컴포넌트에 add 이벤트를 
emit 전송하여 수신합니다. it 을 호출하고 동시에 상위 구성요소에서 호출하여 추가된 로직을 실행한 다음 input의 값을 공백으로 변경하여 상위 구성요소 전달을 실현합니다. 하위 구성요소에 대한 매개변수입니다. 🎜2.2 v-model:xxx +emit🎜🎜defineEmits를 소개한 후, 이와 유사한 를 소개하겠습니다. v-의 방법 model:xxx + Emit은 다음과 같이 구현됩니다: 🎜rrreeerrreee🎜
🎜🎜위의 defineEmits 메소드와 비교해보면 모두가 둘 사이의 유사점을 알 수 있을 것이라고 믿습니다. 여기서는 먼저 상위 구성 요소의 목록을 하위 구성 요소에 전달한 다음 하위 구성 요소에서 상위 구성 요소의 데이터 소스를 수정하고 동시에 emit 반환을 반환합니다. 이를 달성하기 위해 상위 구성요소에 하위 구성요소는 값을 상위 구성요소에 전달합니다. 🎜🎜 (학습 영상 공유: 🎜vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜
위 내용은 vue3 구성 요소 간에 통신하는 방법은 무엇입니까? 의사소통 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!