子组件

1.visible.sync语法糖简单介绍
**

<child-dialog :visible.sync="visible"></child-dialog>
等同于
<child-dialog :visible="visible" @update:visible="val => visible = val"></child-dialog>

2.在VUE中，prop的传递是父传给子，属于单向传输，而关闭事件在子组件里，一般情况下需要通过this.$emit来实现子组件向父组件通信
3.sync指令其实是调用了父组件里写的update，从而实现visible的父子同步，父组件初始化visible,子组件调用关闭事件，触发父组件的update
4.双向绑定v-modal触发的是父组件input事件，.sync触发的是父组件的update事件.

<template><!--  --><el-dialog :visible.sync="visible" title="新增" :before-close="newlybuildcancel"><div slot="footer" class="dialog-footer"><el-button @click="newlybuildcancel">取 消</el-button><el-button type="primary" @click="newlybuildsure">确 定</el-button></div></el-dialog>
</template><script>
export default {name: 'DialogBimServiceTeam',components: {},props: {visible: {type: Boolean,default: false,},// 表单数据formdata: {type: Object,default: () => [],},},// 表单验证规则data() {return {}},computed: {},watch: {},created() {},methods: {newlybuildcancel() {this.$emit('update:visible', false)this.$refs['ruleForm'].resetFields()},newlybuildsure() {this.$refs['ruleForm'].validate((valid) => {if (valid) {this.$emit('update:visible', false)this.$refs['ruleForm'].resetFields()}})},},
}
</script><style lang="scss"></style>

父组件

<template><div class="bimServiceTeam"><div class="bimServiceTeamButton"><!-- <el-button class="newlybuild" @click="dialogTableVisible = true"> --><el-button class="newlybuild" @click="addOrderVisible = true"><span class="icon iconfont"></span><span class="newlybuildtitle">新建</span></el-button><el-button class="Delete"><span class="icon iconfont"></span><span class="Deletetitle">删除</span></el-button></div><div class="bimServiceTeamTable"><TableBimServiceTeam :tableData="tableData"></TableBimServiceTeam></div><!-- <div class="Dialog"><DialogBimServiceTeam ref="addOrder" v-if="dialogTableVisible" :visible.sync="dialogTableVisible" :formdata="formdata"></DialogBimServiceTeam></div> --><div class="main-wrap"><!-- <el-button type="primary" @click="toAdd">添加</el-button> --><DialogBimServiceTeam :visible.sync="addOrderVisible" :formdata="formdata"></DialogBimServiceTeam></div></div>
</template><script>
// import { mapState } from 'vuex'
// 表格组件
import TableBimServiceTeam from './components/TableBimServiceTeam'
import { mapState } from 'vuex'
export default {name: 'BimServiceTeam',components: {TableBimServiceTeam,},data() {return {gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},],addOrderVisible: false,formdata: {name: '',region: '',},tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},],currentOrgthis: '',}},computed: {...mapState(['currentOrg', 'userInfos', 'token', 'tenantId']),},watch: {},created() {this.initRequestPage()},methods: {initRequestPage() {this.requestTableData()},},
}
</script><style lang="scss"></style>

封装Dialog子组件解决 visible.sync问题相关推荐

Vue组件封装 ——dialog对话框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建dialog.vue组件,可以自己取个名字 <script> export def ...
vue 封装dialog_element-dialog封装成子组件
移除 {{Edit}} import UserEditfrom "./UserEdit-dialog.vue"; import updatefrom './Update.vue'e ...
vue父组件调用子组件方法
vue父组件调用子组件方法比如,父组件有一个弹窗组件,在子组件里定义自己的显示隐藏效果,父组件调用. 通过ref调用子组件的方法父组件代码 <template><div>/ ...
【Vue】解决el-dialog作为子组件封装点击显示与隐藏问题
element-ui中的el-dialog组件经常用作嵌套表单来使用,但是当我们把它封装成一个子组件时会发现点击隐藏与显示会出现问题.以下贴出关键代码,希望对大家有帮助,共同学习. 解决代码: el- ...
vue中el-dialog弹窗关闭，子组件控制父组件
1.父组件页面中的点击事件控制子组件的弹窗出现 2.子组件页面有个叉叉,点了之后关闭当前页面 <div class="databtn" @click="record ...
子组件调用子组件的方法
在App.vue父组件中使用子组件HeaderBar 和 Dialog_Login 一.头部组件HeaderBar <template><div id="HeaderBar ...
:visible.sync弹框显示隐藏
1.:visible指的是属性绑定,表示弹框的显示隐藏,当:visible的值为ture的时候,弹框显示,当为false的时候,弹框隐藏,后面的.sync是什么意思呢,指的就是同步动态双向的来表示vi ...
vue封装自己的组件库 02.封装dialog组件
link: https://blog.csdn.net/weixiaowei_2016/article/details/104702793 四.封装一个element-ui风格的dialog组件前置 ...
vue 封装dialog_element-ui 封装dialog组件
封装组件: title="title" :visible.sync="visible" @close="$emit('update:show', fa ...

封装Dialog子组件解决 visible.sync问题

子组件

父组件

封装Dialog子组件解决 visible.sync问题相关推荐

最新文章

热门文章

封装Dialog子组件 解决 visible.sync问题

子组件

父组件

封装Dialog子组件 解决 visible.sync问题相关推荐

最新文章

热门文章

封装Dialog子组件解决 visible.sync问题

封装Dialog子组件解决 visible.sync问题相关推荐