vue子组件改变父组件中data的值_子组件修改父组件data的值-优快云博客

本文链接：https://blog.youkuaiyun.com/mldwyy/article/details/88627119

博客指出子组件无法直接使用父组件data的值，且prop是单向绑定。针对子组件修改父组件data变量的问题，提出让父组件自己修改自己数据的方法，即子组件调用this.$emit方法通知父组件进行修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.子组件无法直接使用父组件中data的值

2.prop是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

那么改如何在子组件中修改父组件的data中变量呢？

既然子组件无法获取父组件的变量，那就让父组件自己修改自己的数据-->子组件调用自己的方法，该方法中调用this.$emit方法用来通知父组件“你该去修改你的变量啦”

可以通过在子组件中调用this.$emit方法，这个方法会通知父组件

components:{
            mycom:{
                template:'<input type="button" value="这是子组件按钮，用来触发父组件方法从而修改父组件的变量" @click="myshow">',
                //通过点击子组件的按钮来触发子组件的myshow方法
                methods:{//子组件的myshow方法触发父组件的函数（第一个参数用来触发父组件的方法，第二个参数是父组件方法的参数）
                    myshow(){
                        this.$emit('fun','子组件修改了')
                    }
                }
            },
        }

父组件定义：

var vm=new Vue({
        el:'#app',
        data:{
            msg:'父组件的data'
        },
        methods:{
            change(data){
                this.msg=data;
            }
        },

<div id="app">
//fun监听子组件触发fun事件，一旦子组件触发父组件就去调用自己的change方法修改变量
    <mycom v-on:fun="change"></mycom>
</div>