文档章节

vue+antdesign模态框实现父子组件之间传值

苇草66083
 苇草66083
发布于 05/20 16:37
字数 788
阅读 31
收藏 1

vue中实现父子组件间单向数据流传递比较方便,子组件通过prop接收父组件传递过来的值,父组件通过监听子组件emit出的函数接收子组件传递的值。

1、父组件向子组件传值(prop)

父组件先绑定值modalVisible,子组件通过prop接收modalVisible

父组件:

<template>
  <addModal :modalVisible="addModalVisible"></addModal>
</template>
<script>
export default {
    data () {
        return {
            //模态框
            addModalVisible: false,
        }
    },
}
</script>

子组件: 

<script>
export default {
    props: {
        modalVisible: Boolean
    },
}

每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值,但是如果在子组件内部改变 prop,Vue 会在浏览器的控制台中发出警告:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "modalVisible"

在子组件中改变接收的prop值,vue文档提供了两种方式:https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

2、子组件向父组件传值

子组件通过emit,发布一个函数changeVisible,并携带false值,然后父组件监听到changeVisible函数,再函数中接收到子组件传递的false这个值

子组件:

<template>
    <div>
        <a-modal
        :visible="modalVisible"
        @cancel="handleCancel"
        >
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'addModal',
    props: {
        modalVisible: Boolean
    },
    methods: {
        handleCancel(e) {
        this.$emit('changeVisible',false)
        },
    }
}

父组件:

<template>
    <a-button type="primary" @click="showModal">新建</a-button>
    <addModal :modalVisible="addModalVisible" 
        v-on:changeVisible="changeVisible"
    ></addModal>
</template>
<script>
export default {
    data () {
        return {
            //模态框
            addModalVisible: false,
        }
    },
    //模态框展示
    changeVisible (value) {
        this.addModalVisible = value;
    },
}
 

3、父子组件相互传值

为实现父子组件相互传值,上述两个方法可以一起综合运用实现效果,但是vue中提供 修饰符sync ,update:propName 的模式触发事件达到父子组件相互传值,其中sync 会被扩展为一个自动更新父组件属性的 v-on 监听器。以父组件向子组件传递title这一propName为例:

子组件:

this.$emit('update:title', newTitle)

父组件: 

<text-document v-bind:title.sync="title"></text-document>
//sync修饰符会被扩展为
<text-document v-bind:title="title" @update:title="val => title = newTitle"></text-document>

根据官网提供的父子组件值的双向传递方法,结合antdesign 模态框API方法,父组件通过:modalVisible.sync="addModalVisible"向子组件传递visible状态值,而子组件模态框关闭时会触发cancel事件,在其定义的handleCancel函数中使用 this.$emit('update:modalVisible',false)的模式触发事件向父组件传值,实现模态框的显示与隐藏。具体代码如下:

父组件:

<template>
  <a-button type="primary" @click="showModal">新建</a-button>
  <addModal :modalVisible.sync="addModalVisible"></addModal>
</template>
<script>
import addModal from './addModal.vue'
export default {
    components: {
        addModal
    },
    data () {
        return {
            //模态框
            addModalVisible: false,
        }
    },
    //模态框展示
    showModal() {
        this.addModalVisible = !this.addModalVisible;
    },
}

子组件:

<template>
        <a-modal
        :visible="modalVisible"
        @cancel="handleCancel"
        >
        </a-modal>
</template>
<script>
export default {
    name: 'addModal',
    props: {
        modalVisible: Boolean
    },
    methods: {
        handleCancel(e) {
        this.$emit('update:modalVisible',false)
        },
    }
}

 

© 著作权归作者所有

苇草66083
粉丝 1
博文 4
码字总数 1588
作品 0
宁波
私信 提问
vue.js原生组件化开发(二)——父子组件

前言 在了解父子组件之前应先掌握组件开发基础。在实际开发过程中,组件之间可以嵌套,也因此生成父子组件。 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 (2)构建注册父...

Reachel
2017/05/16
0
0
如何用VUE写一个多用模态框组件模版

对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希望能帮...

刘员外__
2018/09/20
0
0
Vue父子组件如何双向绑定传值

前言 父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的了,例如它会响应表单元素的属性,当...

chavesgu
2018/07/31
0
0
vue.js 组件之间传递数据

前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。 组件 组件与组件之间,还存...

林鑫
2017/07/11
0
0
23、vue父子组件之间的传值

前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热。 Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1、父组件向子组件传值 (1)第一个就是...

Ewall_
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos 设置hostname

1、centos 6 hostname配置文件为 /etc/sysconfig/network 内容为 NETWORKING=yesHOSTNAME=test_hostname hostname是Linux系统下的一个内核参数,它保存在 /proc/sys/kernel/hostname 下,但......

燃犀
36分钟前
1
0
openSUSE

opensuse aliyun镜像 sudo zypper addrepo -f https://mirrors.aliyun.com/opensuse/distribution/leap/15.0/repo/oss/ aliyun-Oss sudo zypper addrepo -f https://mirrors.aliyun.com/ope......

李有常
42分钟前
1
0
五月天 知足 [結他chord譜]

詞曲: 阿信 Key:E 4/4 Arranged By Kermit Tam Capo 4 > Play C |C   G  |Am  Em  (怎)麼去(擁)有 (一)道彩(虹)  |F   C |F     G (怎)麼去(擁)抱 (一)夏天的(風) |...

阿锋zxf
48分钟前
2
0
OSChina 周二乱弹 —— 你醒啦?现在你已经是丧尸了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @小鱼丁 :分享全仁权的单曲《걱정말아요 그대 (你不要担心)》: 《걱정말아요 그대 (你不要担心)》- 全仁权 手机党少年们想听歌,请使劲儿戳(...

小小编辑
49分钟前
1K
13
再一次生产 CPU 高负载排查实践

前言 前几日早上打开邮箱收到一封监控报警邮件:某某 ip 服务器 CPU 负载较高,请研发尽快排查解决,发送时间正好是凌晨。 其实早在去年我也处理过类似的问题,并记录下来:《一次生产 CPU ...

crossoverJie
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部