vue + elementUI 封装Dialog功能 功能中实现父子传参以及子调用父的函数 并且实现vue中prop的双向数据绑定
使用场景:项目中多次使用Dialog功能然后就封装了一个组件,主要是给用户再次确认,以及提示的功能的功能1.先创建一个子组件主要内容就是DIalog组件的代码,其中有几个可以通过父组件传的变量isShowDialog:控制是否显示,也是需要实现双向数据绑定的变量content:Dialog对话框的主要内容titleText:对话框的标题cancelText:取消按...
·
使用场景:项目中多次使用Dialog功能然后就封装了一个组件,主要是给用户再次确认,以及提示的功能的功能
1.先创建一个子组件主要内容就是DIalog组件的代码,其中有几个可以通过父组件传的变量
isShowDialog:控制是否显示,也是需要实现双向数据绑定的变量
content:Dialog对话框的主要内容
titleText:对话框的标题
cancelText:取消按钮的文字,可以默认不传
confirmText:确认按钮的文字,可以默认不传
<template>
<el-dialog
:title="titleText"
:visible.sync="showDialog"
width="30%"
>
<span>{{content}}</span>
<span slot="footer" class="dialog-footer">
<el-button @click="childOperation('cancel')">{{cancelText}}</el-button>
<el-button type="primary" @click="childOperation('confirm')">{{confirmText}}</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "confirmDialog",
props:{
isShowDialog: {
type:Boolean,
default:true
},
content:{
type:String,
default:'这是一段信息'
},
titleText:{
type:String,
default:'提示'
},
cancelText:{
type:String,
default:'取 消'
},
confirmText:{
type:String,
default:'确 认'
}
},
data() {
return {
showDialog:this.isShowDialog
};
},
created(){
console.log(this.isShowDialog);
},
methods: {
childOperation(value) {
this.$emit('child-operation',value);
}
},
watch: {
isShowDialog(val) {
this.showDialog = val;//②监听外部对props属性result的变更,并同步到组件内的data属性myResult中
},
showDialog(val){
this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
}
},
}
</script>
<style scoped>
</style>
2.父组件的主要代码以及使用说明
<template>
<div id="ServeManage" class="page">
<el-button type="primary" @click="isShowDialog = true">删除</el-button>
<confirmDialog :isShowDialog="isShowDialog" content="请确认是否要删除服务内容管理" @on-result-change = "changeIsShowDialog" @child-operation="operation">
</confirmDialog>
</div>
</div>
</template>
import confirmDialog from '../../components/ConfirmDialog.vue' //组件放在的位置 根据实际修改
export default {
name: "ServeManage",
data(){
return{
isShowDialog:false,
}
},
components: {
confirmDialog //引入组件
},
methods: {
operation(type){
if(type=="confirm"){
//点击确认要执行的代码
this.isShowDialog=false;
}else if (type=='cancel'){
//点击取消要执行的代码
}
},
changeIsShowDialog(val){
this.isShowDialog=val; //监听变化时触发的函数修改父组件的是否显示状态
}
}
};
更多推荐
已为社区贡献3条内容
所有评论(0)