今天要封裝一個模太框，所以需要把模太框單獨作為一個組件使用究珊，并且模太框的顯示與隱藏都通過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修飾符曾沈，之后就不關(guān)父組件啥事了。
// 子組件代碼
<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鸥昏，搞定塞俱，有需要的朋友可以拿去用。
