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

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

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

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

其實關于子組件改變父組件的值，直接改是不可以的，我們一般通過綁定事件來改變，但是如果是reactive里面的復雜數據類型，我們只要不改變其內存地址，是可以改變復雜數據類型里面的值的

下面看相關代碼，父子組件的層級如圖

父組件代碼

<template>
  <h1>ref定義的值{{refNum}}</h1>
  <h1>reactive定義的值{{reactiveNum}}</h1>
  <h1>reactive定義的數組{{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]  // 不改變內存地址，可以通過子組件之間改變里面的值
    })
    return {
      refNum,
      ...toRefs(reactiveObj)
    }
  }
}
</script>

<style>
</style>

子組件

<template>
  <button @click="changeRefVal">點我改變ref的值</button>
  &nbsp;&nbsp;
  <button @click="changeReactiveVal">點我改變reactive的值</button>
  &nbsp;&nbsp;
  <button @click="changeReactiveArr">點我改變reactive的數組</button>
</template>

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

<style>
</style>