vue 子组件修改父组件的prop值

最新推荐文章于 2024-07-01 17:42:55 发布

幻ss星

最新推荐文章于 2024-07-01 17:42:55 发布

阅读量1.4k

点赞数 2

分类专栏： javascript vue.js 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_33294309/article/details/112276859

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue.js

5 篇文章 0 订阅

订阅专栏

在Vue中，直接修改从父组件传递过来的prop是不推荐的，因为prop是单向数据流。要改变prop的值，可以使用`.sync`修饰符或者通过触发`$emit`来更新。具体做法是在父组件中添加.sync修饰符绑定prop，然后在子组件中使用`this.$emit('update:propName', newValue)`来通知父组件更新值。这种方法确保了数据流动的方向性和组件的封装性。

摘要由CSDN通过智能技术生成

前端页面有时会出现在子组件中修改从父组件传过来的prop的值，如果直接在子组件中修改该prop的值时控制台会报错。该如何在子组件中修改prop的值呢？

一、在父组件中绑定的值加上.sync

//使用子组件
<common :foo.sync="foo"></common>

//data
data(){
    return {
        foo: true
    }
}

二、在子组件中修改数据时用this.$emit('update:foo',newValue)

//标签
<button @click="changeValue">修改prop的值</button>
<div v-if="foo">哈哈哈哈哈</div>

//props
props:{
    foo:Boolean,
}

//methods函数
changeValue() {
    this.$emit("update:foo",false)
}