vue 父子组件传值，子组件调用父组件的方法

桃扇骨 2022-01-06 11:29 348阅读 0赞

父组件引入了一个子组件，  el-dialog，  关闭时，调用父组件的方法进行关闭。

父组件：

<msg :title='this.msg.title' :content='this.msg.content' :flag='this.msg.flag' @closeDialog="closeDialog"></msg>

![20190624210100334.png][]

![20190624210115568.png][]

子组件：

<template>
        <div >
           <el-dialog :title='title' :visible.sync='flag' width="400px" center>
                <div class="divmsg">{
       {content}}</div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confim()" size="medium">确 定</el-button>
                </span>
            </el-dialog>
       </div> 
    </template>
    <script>
      export default 
      {
        props:['title','content','flag'],
        methods:
        {
            confim()
            {
               this.$emit('closeDialog');  调用父组件关闭
            }
        }
        
      };
    </script>

[20190624210100334.png]: /images/20211227/751481d52868462a8ddc2e88d0f8079d.png
[20190624210115568.png]: /images/20211227/5867526832b1407d9ddba58621bb9cb6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 实现父子组件传值和子父组件传值

先上一张图，vue 父子组件传值都用的图片。从张图入手了解如何传参。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

超、凢脫俗/ 2023年02月19日 14:29/ 0 赞/ 67 阅读

相关 vue 中父子组件传值，以及子组件调用父组件方法，父组件调用子组件方法

先创建子组件创建一个分页的子组件 <template> <div> <el-pagination bac

喜欢ヅ旅行/ 2022年12月16日 09:07/ 0 赞/ 150 阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 269 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 225 阅读

相关 Vue3---父子组件传值(子组件使用 emit 传值到父组件)

Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context

た入场券/ 2022年11月05日 12:58/ 0 赞/ 165 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 244 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 460 阅读

相关 VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] Vue是一个轻量级的渐进式框架，对于它的一些特性和优点

太过爱你忘了你带给我的痛/ 2022年03月29日 19:40/ 0 赞/ 463 阅读

相关 vue 父子组件传值，子组件调用父组件的方法

父组件引入了一个子组件， el-dialog，关闭时，调用父组件的方法进行关闭。父组件： <msg :title='this.msg.title' :con

桃扇骨/ 2022年01月06日 11:29/ 0 赞/ 349 阅读

相关 Vue入门-父组件向子传值与子组件调用父组件中的方法

Vuex是什么？ > 一般用于中大型项目，管理组件中的传值方式，相当于angular中的全局服务，里面有store声明的属性可以共享，每个组件都可以绑定。想要改变值，可以

青旅半醒/ 2021年09月15日 14:20/ 0 赞/ 466 阅读