Vue3組件間的通信方式詳解

更新時(shí)間：2023年04月24日 09:29:46 作者：憂郁的蛋~

這篇文章主要介紹了Vue3組件間的通信方式，在使用vue時(shí)，我們經(jīng)常會(huì)把不同的模塊拆分成不同的組件，而組件之間有的需要傳遞數(shù)據(jù)，所以組件間的數(shù)據(jù)通信就非常重要了

1、父子組件通信

1.1 defineProps

父子組件通信我們第一個(gè)想到的就是props，我們?cè)谧咏M件顯示聲明所接受的props，然后我們?cè)趶母附M件傳入對(duì)應(yīng)的 key與value，這樣我們就可以在子組件上接收到父組件傳過來的屬性與值。

具體實(shí)現(xiàn)如下:

// 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="請(qǐng)輸入">
      <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>

如上圖所示，我們既實(shí)現(xiàn)了在子組件上顯示了父組件傳過來的 list 數(shù)組，還使可以向list添加數(shù)據(jù)使子組件數(shù)據(jù)更新。

1.2 provide/inject

當(dāng)我們聊完了props，我們第二個(gè)要介紹的就是 vue3 的一個(gè)組合式選項(xiàng) provide 和inject。

projct用于提供可以被后代組件注入的值，而inject用于聲明要通過從上層提供方匹配并注入進(jìn)當(dāng)前組件的屬性。其代碼實(shí)現(xiàn)如下:

// 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="請(qǐng)輸入">
        <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向外提供了一個(gè) key 為 list，值為list.value，同時(shí)將 list,value 設(shè)置成了只讀屬性，防止子組件修改父組件的數(shù)據(jù)源。然后我們 injectAPI接收了 list，實(shí)現(xiàn)了父子組件的通信。

2.子父組件通信

2.1 defineEmits

上面我介紹了兩種父向子傳值的方法，但在我們開發(fā)中，我們還會(huì)遇到子向父組件傳值的情況，那我們?cè)撛趺唇鉀Q呢？第一個(gè)方法就是vue3中的 defineEmits API，代碼實(shí)現(xiàn)如下:

// children.vue
<template>
    <div class="parent-wrap">
        <input type="text" v-model="value" class="form-control" placeholder="請(qǐng)輸入" />
        <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']) //父?jìng)髯?
  // 給父組件傳一個(gè)函數(shù)
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>

如上圖所示，我們?cè)谧咏M件上emit一個(gè)出了一個(gè) add事件給父組件接收，同時(shí)在父組件上調(diào)用來執(zhí)行添加的邏輯，再將 input的value變?yōu)榭?，?shí)現(xiàn)了父組件向子組件傳參。

2.2 v-model:xxx+emit

在介紹完 defineEmits后, 我們?cè)賮斫榻B一種與其有異曲同工之處的v-model:xxx + emit的方法，實(shí)現(xiàn)如下：

// children.vue
<template>
    <div class="parent-wrap">
      <input type="text" v-model="value" class="form-control" placeholder="請(qǐng)輸入" />
        <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'])
  // 給父組件一點(diǎn)東西
const handleAdd = () => {
    // props.list.push(value.value)  //不建議直接修改props的值 把握不住數(shù)據(jù)源的流轉(zhuǎn)
    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>