通过对别的案例反复研究,终于总结出自己对于使用vue+iview创建组件的步骤:
第一步:编辑新建对话框组件(子组件)
<template>
<div>
  <!-- modalFlag自定义绑定名 -->
<Modal v-model="modalFlag" title="对话框组件" fullscreen footer-hide></Modal>
</div>
</template>
<script>
export default {
name: "Inspect",//命名组件,一般使用文件名,首字母大写
data() {
return {
modalFlag: false//v-model绑定内容
};
},
props: {},//传参使用
methods: {
showDialog() {
this.modalFlag = true;//打开的时候让modalFlag为true
},
closeDialog() {
this.modalFlag = false;//关闭的时候让modalFlag为false
}
},
mounted() {}
};
</script>
第二步:调用组件(在父组件里调用子组件)
<template>
  <div>
    <!-- 添加click点击事件 -->
    <Button type="primary" size="large" style="margin-right: 5px" @click="GoToUrl()">查看质检详情</Button>
    <inspect ref="inspect"></inspect>
    <!-- <组件名,调用组件,首字母小写> -->
  </div>
</template> <script>
import inspect from "../views/Inspect";//import导入组件路径
export default {
components: {//components组件名与import一致
inspect
},
data() {
return {};
},
methods: {
GoToUrl() {
this.$refs.inspect.showDialog();//调用子组件inspect的方法showDialog
}
}
};
</script>
这是最简单的对话框组件创建,调用,如果需要传值,静待后续更新咯。
————————————小白一枚,有错请纠。

使用vue+iview创建自己的对话框组件的更多相关文章

  1. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  2. 动手实现一个vue中的模态对话框组件

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...

  3. vue怎么样创建组件呢??

    我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢?怎么用组件呢?怎么样创建自己的组件呢? 前面两个问题就不说了,这里来说说,后面的两个问题: 1)创建自己的组件 通过vue.extend( ...

  4. Vue:如何在vue-cli中创建并引入自定义组件

    一.创建并引入一个组件 1.创建组件 vue-cli中的所有组件都是存放在components文件夹下面的,所以在components文件夹下面创建一个名为First.vue的自定义组件: <t ...

  5. vue.js 创建组件 子父通信 父子通信 非父子通信

    1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用

    vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...

  7. Vue之创建组件之配置路由!

    Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹[views]新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步:在router目录下做如下事 ...

  8. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  9. Vue+Iview+Node 登录demo

    1.相关组件安装 axios  iview  js-cookie  crypto-js 2.子父组件传值.监听窗体大小改变.记住密码 .自定义组件(事件 .props) created:实例已经创建完 ...

  10. vue.js入门(3)——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

随机推荐

  1. Spark下中文分词常用项目

    Spark下中文分词常用项目 四种中文分词工具名称: hanLP ansj jieba fudannlp 推荐使用ansj,HanLP效果也不错 Ansj中文分词 基于n-Gram+CRF+HMM的中 ...

  2. Spark详解(05) - Spark核心编程SparkCore

    Spark详解(05) - Spark核心编程SparkCore RDD概述 什么是RDD RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基 ...

  3. FFmpeg 解码内存泄漏汇总,sws_getContext函数无法释放问题

    使用FFmpeg库做的项目,调试项目的时候发现,连续解视频进行播放,会有明显内存增加问题.连续工作10个小时后就会 被linux 内核kill掉. 通过逐步注掉代码和网上查阅资料.最后发现内存泄漏有一 ...

  4. CSS中知

    1CSS特性    1.3优先级    1.4权重叠加计算 2Chrome调试工具     2.1查错流程 3CSS盒子模型    3.1内容的宽度和高度    3.2边框(border)-连写形式 ...

  5. 微机原理与系统设计笔记2 | 8086CPU结构与功能

    打算整理汇编语言与接口微机这方面的学习记录.本部分讲解8086CPU的结构和基本功能以及特性. 参考资料 西电<微机原理与系统设计>周佳社 西交<微机原理与接口技术> 课本&l ...

  6. vue 解决循环引用组件/动态组件/组件未注册报错

    使用动态组件报错 Unknown custom element: - did you register the component correctly? For recursive component ...

  7. C#开发PACS医学影像三维重建(十四):基于能量模型算法将曲面牙床展开至二维平面

    在医学影像领域中,将三维重建中的人体组织展开平铺至二维,用来研判病灶和制定治疗方案的重要手段之一, 它能够将立体曲面所包含的信息更为直观的展示到二维平面上,常用的情景包括: 牙床全景图.平铺血管.骨骼 ...

  8. By not providing "FindQt5.cmake" in CMAKE_MODULE_PATH this project has asked CMake to find a package configuration file provided by "Qt5", but CMake did not find one.

    环境 qt5.12.3  deepin15.10 cmake构建 由于之前使用的是仓库自带的qt环境,后来需要更高版本qt,于是从官网下载安装器自己安装,重新构建之后便出现这个问题,具体报错如下 CM ...

  9. python正则分组匹配

    import re s = ''' {"type":"buy","order_no":"202006161314138669164 ...

  10. Django-Django基本使用、app、三板斧

    1.纯手撸web框架 1.web框架的本质 理解1:连接前端与数据库的中间介质 理解2:socket服务端 2.手写web框架 1.编写socket服务端代码 2.浏览器访问响应无效>>& ...