vue3.0 子组件如何修改父组件传递过来的值

目录

• 子组件修改父组件传递过来的值
• 使用toRefs进行解决
• 子组件向父组件传值emit的使用注意事项
• 子组件的写法
• 父组件使用

子组件修改父组件传递过来的值

vue 的子组件 不是 不能直接更改父组件的值，需要将props 的值 给到子组件，后再修改，

否则：Unexpected mutation of “props” prop.

vue3提供了一个解决：toRefs：https://v3.cn.vuejs.org/api/refs-api.html#torefs

toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开

使用

const { foo, bar } = reactive({
    foo: 1,
    bar: 2
})
// 核心解决, 使用reactive接收不会响应时更新，需要使用toRefs
const props = defineProps({
    drawerStatus: {
        type: Boolean
    }
})
const {drawerStatus} = toRefs(props)

使用toRefs进行解决

子组件向父组件传值emit的使用注意事项

子组件的写法

需要从setup函数中引出{emit}

父组件使用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。