vue3子组件改变父组件的值（props）reactive和ref的区别

其实关于子组件改变父组件的值，直接改是不可以的，我们一般通过绑定事件来改变，但是如果是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>