vue父子組件通訊的所有方法小結(jié)

更新時(shí)間：2024年07月26日 08:30:47 作者：今天一定晴q

本文將介紹父組件與子組件之間傳遞數(shù)據(jù)的四種方法,以一個(gè)簡(jiǎn)單的小demo為例,通過(guò)實(shí)例全方位解析和代碼演示,便于大家理解,需要的朋友可以參考下

父子組件通訊

父組件展示輸入框用于新增數(shù)據(jù)，子組件展示數(shù)組信息

場(chǎng)景一：直接傳遞一整個(gè)數(shù)組

父組件在子組件標(biāo)簽中使用v-bind綁定一個(gè)屬性名為list，屬性值為要傳遞的數(shù)組list

子組件調(diào)用函數(shù)defineProps，接收父組件傳過(guò)來(lái)的數(shù)據(jù)。defineProps函數(shù)是vue默認(rèn)幫我們引入好了的，它默認(rèn)接收一個(gè)對(duì)象作為參數(shù)，該對(duì)象包含一個(gè)字段，字段名為父組件綁定的屬性名list，字段值又為一個(gè)對(duì)象，對(duì)象中包含子組件期望接收到的數(shù)據(jù)類(lèi)型type和默認(rèn)值default，此處期望接收到一個(gè)數(shù)組，默認(rèn)值為一個(gè)空數(shù)組。list可以直接拿到template模塊中使用

父組件代碼：

<template>
  <div class="inputGroup">
    <input type="text" v-model="value">
    <button @click="add">添加</button>
  </div>

  <Child :list="list"> </Child>  // 父組件將值v-bind綁定傳給子組件
</template>

<script setup>
  import Child from '@/components/child.vue' // 引入子組件
  import { ref } from 'vue'
  const value = ref('')
  const list = ref(['html', 'css', 'js'])

  const add = () => {
    list.value.push(value.value)
    value.value = ''
  }
</script>

子組件代碼：

<template>
    <div class="child">
        <ul>
          <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
    defineProps({       // 子組件使用defineProps接收         
        list: {                   
            type: Array,          
            required: true,
            default: () => []     
        }
    })
</script>

這個(gè)通訊過(guò)程本身就是一個(gè)響應(yīng)式的過(guò)程，所以父組件向子組件傳遞過(guò)去的屬性值 list 發(fā)生改變后，子組件會(huì)重新接收一遍最新的值，由于 list 被定義成了響應(yīng)式，瀏覽器最終就會(huì)將新添加的值成功渲染出來(lái)

場(chǎng)景二：只傳遞新增加的那個(gè)值

父組件在子組件標(biāo)簽中使用v-bind綁定一個(gè)屬性名為msg，屬性值為要傳遞的新增數(shù)據(jù)toChild

子組件定義一個(gè)變量props接收defineProps函數(shù)執(zhí)行的結(jié)果，再將接收到的新增數(shù)據(jù) props.msg添加進(jìn)子組件已經(jīng)定義好的list數(shù)組中

父組件代碼：

<template>
  <div class="inputGroup">
    <input type="text" v-model="value">
    <button @click="add">添加</button>
  </div>

  <Child :msg="toChild"> </Child>
</template>

<script setup>
  import Child from '@/components/child.vue' // 引入子組件
  import { ref } from 'vue'
  const value = ref('')
  const toChild = ref('')

  const add = () => {
    toChild.value = value.value
  }
</script>

子組件代碼：

<template>
    <div class="child">
        <ul>
          <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue'
    const list = ref(['html', 'css', 'js'])
    const props = defineProps({
        msg: ''     // 直接簡(jiǎn)寫(xiě)，不再把msg對(duì)應(yīng)的值寫(xiě)成一個(gè)對(duì)象
    })              
  
    watch(          // 監(jiān)視props.msg的值的變化，一旦變化執(zhí)行回調(diào)函數(shù)
        () => props.msg,
        (newVal, oldVal) => {
            list.value.push(newVal)
        }
    )
</script>

defineProps函數(shù)中的字段可以直接被拿到template中使用，但如果要在js腳本中使用，需要一個(gè)變量來(lái)接收這個(gè)函數(shù)的執(zhí)行結(jié)果

注意：這里不直接list.value.push(props.msg)，而是需要watch對(duì)props.msg的值進(jìn)行監(jiān)聽(tīng)是因?yàn)椋簂ist的更新需要list.value.push()這句js代碼反復(fù)去執(zhí)行，而js代碼在瀏覽器第一遍渲染頁(yè)面完成后，不會(huì)再執(zhí)行第二遍，所以需要watch函數(shù)在監(jiān)視到值變化后，主動(dòng)去執(zhí)行l(wèi)ist的更新

子父組件通訊一

父組件展示數(shù)組信息，子組件展示輸入框用于新增數(shù)據(jù)

借助發(fā)布訂閱機(jī)制，子組件調(diào)用defineEmits函數(shù)接受一個(gè)數(shù)組作為參數(shù)，數(shù)組 [ 'new' ] 表示組件可以觸發(fā)一個(gè)名為 'new' 的自定義事件，返回給emits對(duì)象，可以用它來(lái)觸發(fā) new 事件。點(diǎn)擊按鈕后，調(diào)用emits函數(shù)發(fā)布事件，傳遞的參數(shù)分別為要傳輸給父組件的事件名new和事件值value.value

父組件訂閱該事件，通過(guò)事件參數(shù)獲取子組件提供的值

父組件代碼：

<template>
    <!-- 訂閱new事件-->
    <Child @new="handle"></Child>
    
    <div class="child">
        <ul>
          <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>

</template>

<script setup>
    import Child from '@/components/child2.vue'
    import { ref } from 'vue'
    const list = ref(['html', 'css', 'js'])

    const handle = (event) => {   // event事件參數(shù)，其實(shí)就是子組件發(fā)布事件時(shí)傳輸過(guò)來(lái)的值
        list.value.push(event)
    }
</script>

子組件代碼：

<template>
    <div class="inputGroup">
        <input type="text" v-model="value">
        <button @click="add">添加</button>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    const value = ref('')

    const emits = defineEmits(['new'])  // 創(chuàng)建一個(gè)new事件
    const add = () => {
        emits('new', value.value)  // 發(fā)布事件 
    }
</script>

子父組件通訊二

仍然是父組件展示數(shù)組信息，子組件展示輸入框用于新增數(shù)據(jù)

能用但不建議版

如果將list數(shù)組看做成籃子，新增數(shù)據(jù)看做成蘋(píng)果，那么子父組件通訊一就是兒子把蘋(píng)果丟給父親，父親再將蘋(píng)果裝入籃中；子父組件通訊二就是父親把籃子共享給了兒子，兒子將蘋(píng)果裝入籃中

父組件定義了list數(shù)組，通過(guò)v-model:list指令將父組件的 list 屬性與子組件中的 list prop 進(jìn)行了雙向綁定，意味著當(dāng)在子組件內(nèi)部修改 list 時(shí)，這些更改也會(huì)反映回父組件的 list 屬性中

子組件接收l(shuí)ist的方式就是使用defineProps接收

父組件代碼：

<template>
    <Child v-model:list="list"></Child>
    
    <div class="child">
        <ul>
          <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
    import Child from '@/components/child3.vue'
    import { ref } from 'vue'
    
    const list = ref(['html', 'css', 'js'])
</script>

子組件代碼：

<template>
    <div class="inputGroup">
        <input type="text" v-model="value">
        <button @click="add">添加</button>
    </div>
</template>

<script setup>
    import { ref, defineProps } from 'vue'
    const value = ref('')

    const props = defineProps({
        list: {
            type: Array,
            default: () => []
        }
    })

    const add = () => {
        props.list.push(value.value)
    }
</script>

但是vue官方不建議我們讓子組件直接操作父組件給過(guò)來(lái)的數(shù)據(jù)，因?yàn)檫@樣會(huì)導(dǎo)致數(shù)據(jù)流很混亂。正常來(lái)講我自己的數(shù)組想要被修改，就應(yīng)該由我自己來(lái)改，而不是交到別人手上去改

優(yōu)化版

所以子組件的js代碼應(yīng)當(dāng)優(yōu)化成下面的樣子

使用 defineEmits 函數(shù)來(lái)聲明組件可以觸發(fā)的事件update:list，在 Vue 中，以 update: 開(kāi)頭的事件通常用于通知父組件子組件內(nèi)部數(shù)據(jù)的變更。arr接收list prop 的引用，再把更新過(guò)后的arr拋出出去，v-model:list就會(huì)自動(dòng)get到最新的值

<script setup>
    import { ref, defineProps } from 'vue'
    const value = ref('')

    const props = defineProps({
        list: {
            type: Array,
            default: () => []
        }
    })

    const emits = defineEmits(['update:list'])
    const add = () => {
        const arr = props.list
        arr.push(value.value)
        emits('update:list', arr)
    }
</script>

子父組件通訊三

仍然是父組件展示數(shù)組信息，子組件展示輸入框用于新增數(shù)據(jù)

父組件直接讀取到子組件更新后的list：父組件中定義了一個(gè)響應(yīng)式變量childRef，childRef作為一個(gè)標(biāo)記打到子組件標(biāo)簽上，就可以通過(guò)childRef獲取到子組件的任何數(shù)據(jù)

子組件自己完成對(duì)list的更新，調(diào)用defineExpose函數(shù)，指定list的數(shù)據(jù)可以被外部訪(fǎng)問(wèn)

父組件代碼：

<template>
    <Child ref="childRef"></Child>
    <div class="child">
        <ul>
          <li v-for="item in childRef?.list">{{ item }}</li> 
        </ul>
    </div>
</template>

<script setup>
    import Child from '@/components/child4.vue'
    import { ref, onMounted } from 'vue'
    const childRef = ref(null)  
</script>

子組件代碼：

<template>
    <div class="inputGroup">
        <input type="text" v-model="value">
        <button @click="add">添加</button>
    </div>
</template>

<script setup>
    import { ref, defineProps } from 'vue'
    const value = ref('')
    const list = ref(['html', 'css', 'js'])

    const add = () => {
        list.value.push(value.value)
    }

    defineExpose({ list }) // 自愿暴露數(shù)據(jù)
</script>

ref 是 Vue 中的一個(gè)特殊屬性，它允許我們?cè)诟附M件中引用子組件或 DOM 元素

item in childRef?.list中，？是ES6的新語(yǔ)法，當(dāng)childRef有值的時(shí)候才會(huì)讀取后面的.list，沒(méi)有的時(shí)候就不會(huì)去讀取（這樣安排是因?yàn)楦附M件在執(zhí)行這行代碼的時(shí)候，子組件可能還未加載完畢，這樣以免報(bào)錯(cuò)）

總結(jié)

父子組件通訊：父組件將值v-bind綁定傳給子組件，子組件使用defineProps接收
子組件向父組件通訊：借助發(fā)布訂閱機(jī)制，子組件負(fù)責(zé)發(fā)布事件并攜帶參數(shù)，父組件訂閱該事件，通過(guò)事件參數(shù)獲取子組件提供的值
子組件向父組件通訊：父組件借助v-model將數(shù)據(jù)綁定給子組件，子組件創(chuàng)建'update:xxxx'事件，并將接收到的數(shù)據(jù)修改后emits出來(lái)
子組件向父組件通訊：父組件通過(guò)ref獲取子組件中defineExpose()暴露出來(lái)的數(shù)據(jù)