快捷導(dǎo)航

vue3子組件改變父組件的值（props）reactive和ref的區(qū)別及說明

更新時(shí)間：2025年05月06日 11:18:43 作者：Lysun001

這篇文章主要介紹了vue3子組件改變父組件的值（props）reactive和ref的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3子組件改變父組件的值（props）reactive和ref區(qū)別

其實(shí)關(guān)于子組件改變父組件的值，直接改是不可以的，我們一般通過綁定事件來改變，但是如果是reactive里面的復(fù)雜數(shù)據(jù)類型，我們只要不改變其內(nèi)存地址，是可以改變復(fù)雜數(shù)據(jù)類型里面的值的

下面看相關(guān)代碼，父子組件的層級(jí)如圖

父組件代碼

<template>
  <h1>ref定義的值{{refNum}}</h1>
  <h1>reactive定義的值{{reactiveNum}}</h1>
  <h1>reactive定義的數(shù)組{{reactiveArr}}</h1>
  <little
    :refNum="refNum"
    :reactiveNum="reactiveNum"
    :reactiveArr="reactiveArr"
  ></little>
</template>

<script>
import little from './little'
import { toRefs, reactive, ref } from 'vue'
export default {
  name: "big",
  components: { little },
  setup () {
    const refNum = ref(0)// 不能直接通過子組件改變
    const reactiveObj = reactive({
      reactiveNum: 0,  // 不能直接通過子組件改變
      reactiveArr: [1, 2, 3]  // 不改變內(nèi)存地址，可以通過子組件之間改變里面的值
    })
    return {
      refNum,
      ...toRefs(reactiveObj)
    }
  }
}
</script>

<style>
</style>

子組件

<template>
  <button @click="changeRefVal">點(diǎn)我改變r(jià)ef的值</button>
  &nbsp;&nbsp;
  <button @click="changeReactiveVal">點(diǎn)我改變r(jià)eactive的值</button>
  &nbsp;&nbsp;
  <button @click="changeReactiveArr">點(diǎn)我改變r(jià)eactive的數(shù)組</button>
</template>

<script>
export default {
  name: "little",
  props: ["refNum", "reactiveNum", "reactiveArr"],
  setup (props, context) {
    // 改變 ref 的值
    const changeRefVal = () => {
      props.refNum++ // 報(bào)警告，不生效
    }
    // 改變 reactive 里面的值
    const changeReactiveVal = () => {
      props.reactiveNum++ // 報(bào)警告，不生效
    }
    // 改變 reactive 里面的數(shù)組
    const changeReactiveArr = () => {
      //   props.reactiveArr = [1, 2, 3, 4]  // 報(bào)警告，不生效
      props.reactiveArr.push(4) // 生效
    }
    return {
      changeRefVal,
      changeReactiveVal,
      changeReactiveArr
    }
  },
}
</script>

<style>
</style>