父子俩部件和子父组件通讯的形式

文中已经参与「」

序言

在咱们写 vue3 的项目中，大家都要进行部件通讯，除了需要应用 pinia 云计算平台源的方法以外，大家还可以选用这些更简单API办法呢？那今天我就来为大家介绍详细介绍几类父子俩部件和子父组件通讯的形式。

1、父子俩部件通讯

1.1 defineProps

父子俩部件通讯大家第一个想到的是props，大家在子组件表明申明所认可的props，最后我们在从父部件传到相对应的 key与value， 那样我们就能在子组件上接受到父部件传出去的特性与值，实际完成如下所示:

// 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>

如图所示，我们不仅完成了在子组件上显示出了父部件传出去的 list 二维数组，还使可向list添加数据使子组件数据下载。

1.2 provide/inject

在我们聊过了props，大家第二个要推荐的便是 vue3 的一个组合型选择项 provide 和inject。

projct用以给予能够被子孙后代部件引入数值，而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往外提供了一个 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归还父部件，完成了子组件向父部件传值。

结束语

写作此后，学习过程，热烈欢迎填补。