//父组件
<template>
     <Button @click='openChild'><Button>
     <child-modal :modalStatus="Status" @parentClick='click'></child-modal> //其次,父的自定义事件parenClick被触发
</template>
<script>
     import chilModal from './chilModal.vue'
     export default{
         components:{
             chilModal //注册组件
         },
         data(){
              return{
                   Status:false,
             }
         }
         methods:{
              click(childData){ //而click是parentClick的方法,最终被触发
                   console.log(‘得到子传过来的数据’,childData)
                 this.modalStatus = false;
             }
               openChild(){
                 //status通过props将true传给子的modalStatus
                   this.Status = true
             }
          }
     }
</script> //子组件
<template>
<Modal v-model="modalStatus">
<div slot="footer">
            <Input type="text" v-model="obj.nameIpt"/>
         <Input type="text" v-model="obj.ageIpt"/>
         <Input type="text" v-model="obj.weightIpt"/>
<Button type="success" @click="ok">确认</Button>
</div>
</Modal>
</template>
<script>
export default {
        data(){
       return{
       obj:{
       nameIpt:'',
       ageIpt:'',
       weightIpt:'',
       }
      }
       },
        props:{
modalStatus:{
type:Boolean,
default:false
},
},
methods: {
ok () {
//首先,子组件触发parentClick(它是父的自定义事件),并携带了数据obj
this.$emit('parentClick',this.obj)
},
}
}
</script>

vue 父子之间的通讯的更多相关文章

  1. Vue父子之间的值传递

    将通过两个input框实现父子之间的值传递作为演示,效果图 先注册父子各一个组件,代码如下 <div id="app"> <parent></pare ...

  2. vue 父子之间通信及非父子之间通信

    直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...

  3. vue 父子之间传值

    1:父组件 子组件 子组件利用 props 接收父级传过来的数值.子组件选中的数值返回父亲当中利用 钩子函数 $emit('函数名',传过去的数值)  

  4. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  5. vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  7. vue2.0非父子间进行通讯

    在vue中,父组件向之组件通讯使用的是props,子组件向父组件通讯使用的是$emit+事件,那非父子间的通讯呢,在官方文档上只有寥寥数笔, 概念很模糊,这个空的vue实例应该放在哪里呢,光放文档并没 ...

  8. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

  9. 组件之间的通讯:vuex状态管理,state,getters,mutations,actons的简单使用(一)

    之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...

随机推荐

  1. 【Android Studio安装部署系列】二十七、Android studio修改项目名称和包名

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 实际项目开发中可能碰到项目名称写错了或者需要修改,而且包名可能也想要修改,那么如何操作呢. 本文是在Android Studio3. ...

  2. 卷积神经网络 CNN 学习笔记

    激活函数Relu 最近几年卷积神经网络中,激活函数往往不选择sigmoid或tanh函数,而是选择relu函数.Relu函数的定义 $$f(x)= max(0,x)$$ Relu函数图像如下图所示: ...

  3. Spring Boot 2.0 配置图文教程

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 本章内容 自定义属性快速入门 外化配置 自动配置 自定义创建 ...

  4. 深度学习之卷积神经网络(CNN)详解与代码实现(二)

    用Tensorflow实现卷积神经网络(CNN) 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/10737065. ...

  5. 1.4部署到IIS「深入浅出ASP.NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 很多人第一次在IIS中部署Asp.Net Core App的人都会遇到问题,会发现原来的部署方式无法运行Asp.N ...

  6. 解读经典《C#高级编程》继承 页107-113.章4

    前言 本章节开始讲接口. 接口 接口的声明很像抽象类,有方法的声明但无方法体.但它比抽象类限制更多.和类比起来,接口的定义有众多限制. 接口只能包含声明,而无方法体 接口只能包含方法.属性.索引器.事 ...

  7. DSAPI+DS控件库 Windows7风格控件演示

    效果图 部分代码 DSAPI.Win7特性.任务栏特效.初始化() '这句非常重要,很多对任务栏特性的操作都需要先初始化 DSAPI.Win7特性.设置任务栏窗口缩略图(Me, My.Resource ...

  8. SmartUpload工具包的中文乱码问题详解

    关于SmartUpload工具包的中文乱码问题,输出在服务端的中文显示是乱码,而英文数字,没有任何问题,我在网上看了其他人的问题和回答,让我觉得有道理,却又用不着,最后在多次试验中,终于找到了问题所在 ...

  9. mysql进阶知识

    一.存储引擎 引擎 指的是一个系统的核心部分 引擎有不同分类是为了适应不同的使用场景 查看mysql支持所有引擎 show engines; MRG_MYISAM 是一堆MYISAM表的集合 用于做水 ...

  10. Android View的重绘ViewRootImpl的setView方法

    博客首页:http://www.cnblogs.com/kezhuang/p/ 本篇文章来分析一下WindowManager的后续工作,也就是ViewRootImpl的setView函数的工作 /i* ...