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=val
console.log(this.isShow,'子组件点击取消后,父组件的isShow的值')
},
getSonSure(){
// 模拟确定按钮调取接口
setTimeout(()=>{
this.isShow=false
},3000)
},
}, } </script>
子组件如下:
<template>
<div class="print">
<p>我是弹窗组建</p>
<el-dialog
title="提示"
: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=false
this.$emit('closeDialogFather',this.dialogVisible);
},
sureDialog(){
this.$emit('sureDialogFather');
},
},
}
</script>
自己看瑟,
vue父子组件写法,数据传递,顺便封装 element-ui的弹窗组建的更多相关文章
- vuejs父子组件的数据传递
在vue中,父组件往子组件传递参数都是通过属性的形式来传递的 <div id='root'> <counter :count = '1'></counter> &l ...
- vue 子组件把数据传递给父组件
<div id="app"> <child v-on:drop='parent'></child> //这里v-on:drop="pa ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- 浅入深出Vue:子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- vue 父子组件双向绑定
vue组件有2大特性: 1.全局组件和局部组件 2.父子组件的数据传递 接下来直接用demo直接看如何传值(静态传值) father.vue <template> <div> ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue 父子组件相互传递数据
例子一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
随机推荐
- Ubuntu 16.04 编译OpenCV 问题解决stdlib.h: No such file or directory
https://blog.csdn.net/xinyu391/article/details/72867510 https://ask.csdn.net/questions/365969
- Writable序列化
序列化:将内存中的对象 转换成字节序列以便于存储在磁盘上或者用于网络传输. 反序列化:将磁盘或者从网络中接受到的字节序列,装换成内存中的对象. 自定义bean对象(普通java对象)要想序列化传输,必 ...
- CSS:盒模型和position定位
盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分 ...
- jvisualvm All-in-One Java Troubleshooting Tool
java 监控.故障.性能可视化分析 VisualVM: Download https://visualvm.github.io/download.html All-in-One Java Troub ...
- Linux之sed、awk
Linux 之AWK 命令 简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在对数据分析并生成报告时,显得尤为强大. 简单来说awk就是把文件逐行的读入,以空格默认分隔 ...
- Copycat - Overview
Copycat’s primary role is as a framework for building highly consistent, fault-tolerant replicated s ...
- 基于VUE,VUX组件开发的网易新闻页面搭建过程
根据妙味课堂上的一个教程练习总结,供自己复习用 一.功能介绍 一个网易新闻客户端的浏览页面,通过网易新闻的api接口实时获取新闻数据,用vux搭建样式框架,以轮播图,文字滚动,图文列表等形式把内容展示 ...
- kafka后台启动的命令
kafka如果直接启动会出现问题,就是信息会打印在控制台,就会出现在控制台. 然后关闭窗口,kafka随之关闭,然后启动以下的命令就可以实现. ./kafka-server-start.sh ../c ...
- @media screen and (max-width: 960px)与@media (max-width: 960px) 有screen与没有screen的区别
我们先来看下下面这段代码,估计很多人在响应式的网站CSS很经常看到类似下面的这段代码: @media screen and (max-width: 960px){ body{ background: ...
- Asp.net Mvc post表单提交多个实体模型
上一遍说道用Tuple实现Asp.net Mvc action返回多个模型实体给view,此篇发过来,实现view表单提交多个实体模型到action. 1.view代码: @{ Layout = nu ...