在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>
   <MsgModal
      v-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百口桶阶段，才没做两个项目
有不足的地方请人人包涵和指点
迎接人人议论