在vue的学习中，一开始我是自己写组件练手的，在这个过程中我遇到一个问题：
props：父组件传递给子组件参数
（1）props直接在子组件里直接使用是可以实时更新的
（2）props如果在created，mounted等声明或者直接赋值给data的时候，再用data的时候是不可以实时更新的
（3）内部的data是可以实时更新的
（4）但是内部不可以强制去改变父元素传递过来的props，这样是官方不允许的而且是不严谨的

那么，我在写模态框组件的时候就产生一个很矛盾的问题，如果父级props控制了组件内部的显示和隐藏，
内部点击模态框阴影的时候也可以让其自动隐藏，我到底去修改什么值，修改了之后怎么去改变父组件传递过来的props，
给全局一个反馈呢。
在看过文章和自己动手操作后选取了一种方式，将内部的data和props进行关联，采用vue中v-modal的原理，值发生变化（input事件），
对应的数据也发生相应的改变：
不多说，直接贴代码：

子组件：
template：

<template ><div :value = "value" v-show = "isShow" ><div :class = "{active: isShow}" class = "modal msg" ><div @click = "onMaskClose" class = "modal-mask" ></div ><div class = "modal-wrapper" ><div :style = "{width: '428px'}" class = "modal-container" ><div class="header">模态框</div><div class = "body" ><div v-if="!$slots.content" v-html="content"></div><slot v-else="content" name="content"></slot></div ><div class = "footer" ><div @click = "onClick" class = "btn" >{{ btnTxt }}</div ></div ></div ></div ></div ></div >
</template >

javascript：

import { mapState, mapActions } from 'vuex'import _ from 'lodash'export default {name: "msg-modal",data () {return {isShow: this.value}},props: {value: {type: Boolean,default: false},closeable: {type: Boolean,default: false},btnTxt: {type: [String, Number],default: '确定'},content: {default: '内容'}},watch: {value (val) {this.isShow = val;},isShow (val) {this.$emit('input', val);}},computed: {...mapState({allAnchorList: state => state.anchor.list.data})},methods: {...mapActions(['removeAnchor']),onClick () {this.$emit('onClick')},onMaskClose () {if(!this.closeable) {return}Object.assign(this.$data, this.$options.data())}}}

less：

.modal {position: fixed;z-index: 800;top: 0;left: 0;width: 100%;height: 100%;display: table;transition: all .3s;background-color: transparent;&.active{opacity: 1;}.modal-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;background-color: rgba(0, 0, 0, .5);}.modal-wrapper {display: table-cell;vertical-align: middle;.modal-container {width: 300px;margin: 0 auto;border-radius: 2px;//box-shadow: 0 2px 8px rgba(0, 0, 0, .33);transition: all .3s ease;font-family: Helvetica, Arial, sans-serif;.header{position: relative;backgroud-color: #fff,min-height: 50px;}.modal-body {margin: 20px 0;}.footer {padding-bottom: 26px;overflow: hidden;border-bottom-left-radius: 4px !important;border-bottom-right-radius: 4px !important;background-color: #fff;.btn {height: 36px;line-height: 36px;width: 230px;margin: 0 auto;color: #fff;font-size: 14px;text-align: center;cursor: pointer;user-select: none;background-color: #2859ED;border-radius: 4px;}}}}
}

父组件的引用：
template:

<template ><div><MsgModalv-model = "show"content = "这是一段内容"@onClick = "handleClick"/></div>
</template >javascript:
<script >import MsgModal from './components/Modal/MsgModel'export default {name: 'App',data(){return {show: false}},components: {MsgModal},methods: {handleClick () {console.log('点击模态框确定按钮')}}}
</script >

样式随便写的，
主要就是用vue的v-model原理，将值与被传递的props实现双向绑定，
需要注意的是在组件mounted的时候需要对组件初始化中的传递的props赋值给绑定的v-model的value
自己也是才摸索vue全家桶阶段，才没做两个项目
有不足的地方请大家见谅和指导
欢迎大家讨论