【咕笛说vue】子组件如何实现直接更新父组件的data中值？

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

父传子：props

子传父：$emit

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

看一个例子：

 JavaScript

//父组件
<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的标识符，用来指示这个传入属性是不是可以被子级直接更新修改，那下面我们来看如何使用它。

 JavaScript

//父组件 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的值啊，这个是没错，但这个是通过引用类型的引用地址不变的特点实现的，除非你是故意为之，否则这将有很大的风险，因为你的父级的属性值可能在不知情的情况下被子级篡改了，而且很大的概率下控制台会有报错信息。

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

原文链接:http://www.gudi.tech/post/13.html