//父组件
<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. ASP.NET Core - 从Program和Startup开始

    Program 我们先看一下1.x和2.x的程序入口项的一个差异 1.x public class Program { public static void Main(string[] args) { ...

  2. 自定义GridControl编辑器

    本文版权归博主 惊梦无痕 所有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作.SourceLink 鉴于网上的针对GridControl的一些代码比较凌乱,且功能分散,故将整理过的代码分享出来 ...

  3. 【Vue.js】代码优化:在dom中加一行v-if就可少写一个循环类方法

    [问题描述] 把当前用户的购物车中(cartList),商品(good)选中字段checked = true的商品在订单页面中进行展示出来. [一般做法](两次循环) 首先取出当前用户的购物车列表,循 ...

  4. SLAM+语音机器人DIY系列:(二)ROS入门——10.在实际机器人上运行ROS高级功能预览

    摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...

  5. 🕵️ 如何绕过 BKY 对 script 的屏蔽

    Conmajia January 20, 2019 警告 这是试验,警告个屁,请不要多多尝试用它做多余的事. 果不其然,这篇文章立刻被移出主页了,我就说嘛,BKY 哪儿会那么包容和坦然呢? 原文 do ...

  6. 基于vue-cli快速构建

    基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a   Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...

  7. 学习笔记—MySQL基础

    数据库的介绍 mysql数据库介绍 开放源码的轻量级关系型数据库管理系统,体积小.速度快.操作便捷. 数据库的启动和连接 mysql数据库启动 在终端输入以下命令,启动mysql服务器 service ...

  8. 《JavaScript高级程序设计》笔记:HTML5脚本编程(16)

    跨文档消息传递 跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息.例如,www.wrox.com域中的页面与位于一个内嵌框架中 ...

  9. java工作流引擎Jflow父子流程demo

    关键字 驰骋工作流引擎 流程快速开发平台 workflow ccflow jflow  .net开源工作流 定义 一个流程A的一个节点,因工作的需要调起另外的流程B,A就叫父流程,B就叫子流程.如果流 ...

  10. Linux使用wget、安装Python

    原文:https://blog.csdn.net/ghost_chou/article/details/81905302 1.指定需要安装的目录或创建并访问到该选择的目录下. mkdir /data/ ...