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>

 

Logo

前往低代码交流专区

更多推荐