今天要封装一个模太框，所以需要把模太框单独作为一个组件使用，并且模太框的显示与隐藏都通过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，搞定，有需要的朋友可以拿去用。
