开发项目过程中，涉及重复的代码，比如模态窗，我们可以封装起来，然后采用组件的形式，引入即可，这样也方便维护。
以下我们来封装Dialog 对话框组件
1、 创建Dialog组件
我们在项目目录下创建\src\components\Dialog.vue
<template>
<el-dialog title="提示" :visible.sync="DialogVisible" width="30%" @close="DialogClosed" >
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="DialogVisible= false">取 消</el-button>
<el-button type="primary" @click=" DialogVisible= false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
DialogVisible:false,
}
},
created () {
},
methods: {
show (){
this.DialogVisible = true
},
//传值
DialogClosed(){
this.$emit('tran','6661222')
}
}
}
</script>2、 使用组件：父级页面HTML代码
<template>
<el-button type="text" @click="show">点击打开 Dialog</el-button>
<!-- 使用组件 -->
<Dialog ref="Dialog" @tran="getUser"></Dialog>
<!-- 使用组件 -->
</template>3、 使用组件：父级页面js代码引入组件
<script>
import Dialog from "@/components/ Dialog.vue"
export default {
data () {
},
components:{
UploadPhotos
},
methods: {
// 点击打开 Dialog
show(){
this.$refs. Dialog.show();
},
//父级页面获取值
getUser（e）{
console.log(e)
}
}
}
</script>
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）