子组件如何实现直接更新父组件的data中值?

前端老赵前端老赵 前端开发培训 315 0


vue中父子组件的传值方式,我们都比较熟悉了吧?

子组件如何实现直接更新父组件的data中值?

父传子:props

子传父:$emit

这个都是常识中的常识了,自不用多说。但有一种情况是,我需要在子组件中改变外层组件的传进来的值,也就是父级组件的data值,这个应该如何实现呢?

看一个例子:

//父组件
<child-component :visible="visible" @onClose="closeHandler"></child-component>
<script>
export default{
    data(){
        return {
            visible:false
        }
    },
    methods:{
        show(){
            this.visible = true;
        }
        closeHandler(){
            this.visible = false;
        }
    }
}
</script>


//子组件

<template>
    <div v-if="visible" @click="onClose">我是子组件</div>
</template>
<script>
export default{
    props:{
        visible:{
            type:Boolean,
            default:false
        }
    },
    methods:{
        onClose(){
            this.$emit("onClose")
        }
    }
}
</script>

以上的例子是我们最常看到的一种子组件传值给父组件的方式,就是子用emit去发通知,父去接这个通知,再由父自己去更新自己的data.


这样的写法有没有问题?当然是没有问题的。但是有没有更好的方法,这样是不是很麻烦啊!我的父组件要维护的东西这样也太多了,只是一个visible的问题,我要单独定义一个方法去处理一下?这开销也太大了...


没错,vuejs也考虑到了这点,于是就定义一个sync的标识符,用来指示这个传入属性是不是可以被子级直接更新修改,那下面我们来看如何使用它。

//父组件 visible后面了一个sync的标识符
<child-component :visible.sync="visible" @onClose="closeHandler"></child-component>
<script>
export default{
    data(){
        return {
            visible:false
        }
    },
    methods:{
        show(){
            this.visible = true;
        }
        closeHandler(){
            this.visible = false;
        }
    }
}
</script>


//子组件

<template>
    <div v-if="visible" @click="onClose">我是子组件</div>
</template>
<script>
export default{
    props:{
        visible:{
            type:Boolean,
            default:false
        }
    },
    methods:{
        onClose(){
            this.$emit("update:visible",true);  //重点看这里,update:xxx 这个是固定的写法,也就是你要更新哪个传入属性(prop)的值
        }
    }
}
</script>


通过以上的两个地方的改变,就实现了子改父的data属性值了!


有人可能会这样说,我传一个对象作为prop给子级,子级就可以直接改prop的值啊,这个是没错,但这个是通过引用类型的引用地址不变的特点实现的,除非你是故意为之,否则这将有很大的风险,因为你的父级的属性值可能在不知情的情况下被子级篡改了,而且很大的概率下控制台会有报错信息。


好了,老赵给大家讲的子组件改父组件的内容就是这些,大家在平时项目中要形成组件的思想,尽可能的把通用功能写成组件,并且持续不断的去完善改进组件的功能,使组件用最少的传入参数,去完成最多的功能。同学们加油吧!






本文系前端老赵独家发表,未经许可,不得转载。

喜欢0发布评论

评论列表

发表评论

  • 昵称(必填)
  • 邮箱
  • 网址