vue3子组件改变父组件的值（props）reactive和ref的区别及说明
作者：Lysun001
这篇文章主要介绍了vue3子组件改变父组件的值（props）reactive和ref的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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>
<button @click="changeReactiveVal">点我改变reactive的值</button>
<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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。