详解vue父子组件关于模态框状态的绑定方案

2024-09-28 07:29:00

日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如：

<template>
  <div class="page-xxx">
    //点击打开新增弹窗
    <button>新增</button>
    //点击打开编辑弹窗
    <button>编辑</button>
    //点击打开详情弹窗
    <button>详情</button>
    <Add :showAdd="false"></Add>
    <Edit :showEdit="false"></Edit>
    <Detail :showDetail="false"></Detail>
  </div>
</template>

子组件：

<div class="page-add">
  <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.dialogVisible= false
    },
  },
}
</script>

如何实现子组件和父组件模态框状态的同步

方案一：使用.sync 修饰符

父组件：

<template>
  <div class="page-xxx">
    //点击打开新增弹窗
    <button @click="show = true">新增</button>
    <Add :show.sync="show"></Add>
  </div>
</template>

子组件：

<div class="page-add">
  <el-dialog:visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  watch: {
    show(value) {
      this.dialogVisible= value
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.$emit('update:show', false);
    },
  },
}
</script>

方案二：使用v-model

父组件：

<template>
  <div class="page-xxx">
    //点击打开新增弹窗
    <button @click="show = true">新增</button>
    <Add v-model="show"></Add>
  </div>
</template>

子组件：

<div class="page-add">
  <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  watch: {
    show(value) {
      this.dialogVisible= value
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.$emit('input', false)
    },
  },
}
</script>

computed OR watch ?

对于上面的两种方案，子组件内部还可以使用计算属性的写法

computed
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        return this.$emit('input', value)
      },
    },
  },
  methods: {
    handleClose(val) {},
  },
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

利用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template> <div class="modal" v-show="show" transition="fade"> <div class="modal-dialog"> <div cla
vue.extend实现alert模态框弹窗组件

本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert
Vue.js弹出模态框组件开发的示例代码

前言在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发
vue实现模态框的通用写法推荐

在看了element组件的源码后发现,所有模态框其实实现方法都差不多,主要用到了vue在组件化上的双向绑定.代码:  <template lang="html"> <transition name="el-fade-in-linear"> <div draggable="true" @drag="mouseDrag" @dragend="mouse
Vue组件系列开发之模态框

项目基础工程文件是使用vue-cli3.0搭建的,这里不过多介绍.开发Vue组件系列之模态框,主要有标题.内容.定时器.按钮文案.按钮事件回调.遮罩层这些可配置项.本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出. 使用命令行 $ Vue create echi-modal $ cd echi-modal $ npm install $ npm run serve $ npm run build $ npm run lint 添加vue.config.js文件,配置如下 const
详解如何用VUE写一个多用模态框组件模版

对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希望能帮助到您! 懒癌患者直接复制粘贴即可 Modal.vue组件 <template>  <transition name="modal-fade">  <div class=&qu
详解vue父子组件关于模态框状态的绑定方案

日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div class="page-xxx"> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</button> //点击打开详情弹窗 <button>详情</button> <Add :showAdd="false">
详解vue父子组件状态同步的最佳方式

哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接
详解vue父子组件间传值(props)

先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入
详解Vue.js 可拖放文本框组件的使用

可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=
详解vue 模版组件的三种用法

本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&
详解Vue的组件中data选项为什么必须是函数

官方解释 data 必须是函数构造 Vue 实例时传入的各种选项大多数都可以在组件里使用.只有一个例外:data 必须是函数.实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数.但理解这种规则为何存在也是很有益处的,
详解Angular父子组件通讯

概述 Angular组件间通讯组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来
详解使用React制作一个模态框

模态框是一个常见的组件,下面让我们使用 React 实现一个现代化的模态框吧. 组件设计模态框想必大家都很熟悉,是工作中常用的组件,可以让我们填写或展示一些信息而不必打开一个新页面.在开始编码之前,我们先来了解一个 React 模态框组件应该如何设计. React 是一个状态(数据)驱动的前端框架,一个模态框最重要的状态就是打开和关闭,visible,当 visible 为 true 时,模态框打开,反之亦然. 由于 React 所提倡的是一种声明式,组件化的开发体验,每个组件都是状态 =>
Vue中一个组件调用其他组件的方法详解(非父子组件)

目录前言方式一:引用式方式二:vuex 1.src/store/index.js 2.被使用组件- A 页面(组件) 3.使用触发页面-B 页面(组件) 方式三:使用事件总线eventBus定义全局事件 1.src/main.js 2.触发页面-B组件/发布事件 3.接收页面-A组件/订阅事件 4.移除事件总结前言 Vue中,一个组件调用其他组件的方法(非父子组件) 场景——B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式
详解vue.js组件化开发实践

前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

详解vue父子组件关于模态框状态的绑定方案

相关推荐

随机推荐