vue父子组件写法，数据传递，顺便封装 element-ui的弹窗组建

父组件如下:

<template><div class="print"><el-button @click="bbclick">点击我弹出公共组件</el-button><common-dialog :isShow="isShow" @closeDialogFather="getSonCancel"  @sureDialogFather="getSonSure"></common-dialog></div>
</template>
<script>import commonDialog from './commonDialog.vue'export default {name: 'print',data () {return {isShow:false}},mounted(){},components:{commonDialog},methods:{bbclick(){this.isShow=true},getSonCancel(val){this.isShow=valconsole.log(this.isShow,'子组件点击取消后，父组件的isShow的值')},

      getSonSure(){//        模拟确定按钮调取接口        setTimeout(()=>{            this.isShow=false        },3000)      },

}, } </script>

　　子组件如下：

<template><div class="print"><p>我是弹窗组建</p><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"><span>大哥好啊，getoutway bitch get out myway</span><span slot="footer" class="dialog-footer"><el-button @click="closeDialog">取 消</el-button><el-button type="primary" @click="sureDialog">确 定</el-button></span></el-dialog></div>
</template>
<script>export default {name: 'print',props:{isShow:{type:Boolean,default:false},},data () {return {dialogVisible: this.isShow}},watch: {isShow () {this.dialogVisible = this.isShow;console.log(this.dialogVisible)}},mounted(){},methods:{closeDialog(){this.dialogVisible=falsethis.$emit('closeDialogFather',this.dialogVisible);},sureDialog(){this.$emit('sureDialogFather');},},}
</script>

　自己看瑟，

转载于:https://www.cnblogs.com/myfirstboke/p/10395620.html

vue父子组件写法，数据传递，顺便封装 element-ui的弹窗组建相关推荐

4-2 父子组件的数据传递
在Vue中,父组件向子组件传值都是靠属性的形式决定的编写如下代码: 这次用局部的形式来编写组件 //在控制台上显示效果如下: //如上,可以发现--尽管页面上的数据点击后有发生改变,可是却报了错误! ...
VUE父子组件-传数据的理解
1.概述. 父组件对子:利用props接收参数.应用场景:对于可复用的子组件,传参使子组件复用. 子向父传递:利用事件机制.在子组件触发事件时,利用emit设置传的参数以及对应的函数名发送给父组件内的 ...
浅入深出Vue：子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
Vue父子组件生命周期
Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...
html用vue传递数据,Vue组件及数据传递详解
本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...
三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) ...
VUE组件：组件的数据传递（props）
组件的数据传递 props的作用使用props流程 ①给组件添加props选项 ②在调用组件时传入实际参数即可 ③完整代码及效果 ④使用props传递分析使用props传递数据时的一些细节 ①传参 ...
vue组件之间数据传递和通信方式总结
vue组件之间数据传递和通信方式总结方式主要包括: 父组件=>子组件 | 单向数据流,props 子组件=>父组件 | 观察者模式,即vue的自定义事件 $emit 和 $on 非父子组 ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

vue父子组件写法，数据传递，顺便封装 element-ui的弹窗组建

vue父子组件写法，数据传递，顺便封装 element-ui的弹窗组建相关推荐

最新文章

热门文章