Vue弹窗的使用与传值

使用element-UI中的Dialog 对话框 + vue组件结合实现~~~·~

定义html

复制代码
<div @click="MyAnalyze()">我的区划</div>

 <el-dialog title="" :visible.sync="dialogBiomeVisible">
      <NationalBiome :closeValue="'TypeBiome'" @closeMoule="closeMoule"></NationalBiome>
 </el-dialog>

<el-dialog> </el-dialog> 这是element-UI自带的标签,

:visible.sync="" 是用来控制显示或者隐藏状态,当dialogBiomeVisible的值为true的时候为显示,false的时候就是隐藏,

<NationalBiome></NationalBiome> 这个就是自己定义的组件名;

引入组件

复制代码
<script>
import NationalBiome from './National_Biome';  //组件内部引入 ---编辑生态区
export default {
  name: 'App',
  components:{  //定义组件
    NationalBiome, //编辑生态区
  },
}

components中用来定义组件名称,名称要和important的时候保持一致

传值--父组件传子组件

父组件中的定义

父组件向之组件传值的时候,需要在组件标签中定义一个自定义属性进行传值,可以传一个字符串,也可以传一个变量

子组件中的定义(取值)

子组件在export default{}中通过props来进行接收,使用的时候可以直接当变量使用,js中通过this.closeValue取值,html中{{closeValue}}

传值--子组件传父组件

子组件中的定义

子组件中通过触发某个事件,然后通过this.$emit()来进行传值,第一个值是事件名,第二个是传递的值

复制代码
<!--关闭按钮-->
<div class="fr right_icon" @click="closeBtn()">
     <s></s>
</div>

 methods:{
     //点击关闭的时候--给调用的父组件传值
     closeBtn(){
          if(this.closeValue == "TypeBiome"){
              this.$emit('closeMoule','closeMoule1')
           }
      }
}

父组件定义(取值)

定义一个事件监听子组件的数据变化 closeMoule方法的参数就是子组件中closeMoule1的值

复制代码
<SpeciesAnalyzed :closeValue="'TypeBiome'" @closeMoule="closeMoule"></SpeciesAnalyzed>

methods:{
//获取自组建传过来的值--关闭编辑生态区的弹框
    closeMoule(e){
        alert(e)
    }
}
相关推荐
中微子4 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子5 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则6 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele6 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4536 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友6 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir6 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴7 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子7 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead8 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构