子组件修改props示例

今天要封装一个模太框，所以需要把模太框单独作为一个组件使用，并且模太框的显示与隐藏都通过props来处理，在这里分享一下，如果大家有需要，可以参考。

这里用的框架是vue2.0+element-ui，本文核心点在于.sync修饰符，话不多说，贴代码：

// 父组件核心代码：
<template>
  <button @click="openModal">打开模太框</button>
  <my-dialog :showDialog.sync="showDialog"></my-dialog>
</template>
<script>
import MyDialog from '@/components/Dialog'
export default {
  components: {
    MyDialog
  },
  data(){
    return {
      showDialog: false
    }
  },
methods: {
    openModal(){
      this.showDialog = true;
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

以上是父组件的简单代码，非常简单，核心点是.sync修饰符，之后就不关父组件啥事了。

//  子组件代码
<template>
  <div>
    <el-dialog v-show="showDialog" title="提示" width="30%" center>
      <span>这是一个模太框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click.stop="closeModal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["showDialog"],
  data() {
    return {
        
    };
  },
  methods: {
      closeModal(){
          this.$emit('update:showDialog', false)
      }
  }
};
</script>
<style lang="scss" scoped>
</style>

ok，搞定，有需要的朋友可以拿去用。