vue 父子之间的通讯
//父组件
<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 父子之间的通讯的更多相关文章
- Vue父子之间的值传递
将通过两个input框实现父子之间的值传递作为演示,效果图 先注册父子各一个组件,代码如下 <div id="app"> <parent></pare ...
- vue 父子之间通信及非父子之间通信
直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...
- vue 父子之间传值
1:父组件 子组件 子组件利用 props 接收父级传过来的数值.子组件选中的数值返回父亲当中利用 钩子函数 $emit('函数名',传过去的数值)
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue2.0非父子间进行通讯
在vue中,父组件向之组件通讯使用的是props,子组件向父组件通讯使用的是$emit+事件,那非父子间的通讯呢,在官方文档上只有寥寥数笔, 概念很模糊,这个空的vue实例应该放在哪里呢,光放文档并没 ...
- vue父子组件通信
一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...
- 组件之间的通讯:vuex状态管理,state,getters,mutations,actons的简单使用(一)
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
随机推荐
- ASP.NET Core - 从Program和Startup开始
Program 我们先看一下1.x和2.x的程序入口项的一个差异 1.x public class Program { public static void Main(string[] args) { ...
- 自定义GridControl编辑器
本文版权归博主 惊梦无痕 所有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作.SourceLink 鉴于网上的针对GridControl的一些代码比较凌乱,且功能分散,故将整理过的代码分享出来 ...
- 【Vue.js】代码优化:在dom中加一行v-if就可少写一个循环类方法
[问题描述] 把当前用户的购物车中(cartList),商品(good)选中字段checked = true的商品在订单页面中进行展示出来. [一般做法](两次循环) 首先取出当前用户的购物车列表,循 ...
- SLAM+语音机器人DIY系列:(二)ROS入门——10.在实际机器人上运行ROS高级功能预览
摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...
- 🕵️ 如何绕过 BKY 对 script 的屏蔽
Conmajia January 20, 2019 警告 这是试验,警告个屁,请不要多多尝试用它做多余的事. 果不其然,这篇文章立刻被移出主页了,我就说嘛,BKY 哪儿会那么包容和坦然呢? 原文 do ...
- 基于vue-cli快速构建
基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...
- 学习笔记—MySQL基础
数据库的介绍 mysql数据库介绍 开放源码的轻量级关系型数据库管理系统,体积小.速度快.操作便捷. 数据库的启动和连接 mysql数据库启动 在终端输入以下命令,启动mysql服务器 service ...
- 《JavaScript高级程序设计》笔记:HTML5脚本编程(16)
跨文档消息传递 跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息.例如,www.wrox.com域中的页面与位于一个内嵌框架中 ...
- java工作流引擎Jflow父子流程demo
关键字 驰骋工作流引擎 流程快速开发平台 workflow ccflow jflow .net开源工作流 定义 一个流程A的一个节点,因工作的需要调起另外的流程B,A就叫父流程,B就叫子流程.如果流 ...
- Linux使用wget、安装Python
原文:https://blog.csdn.net/ghost_chou/article/details/81905302 1.指定需要安装的目录或创建并访问到该选择的目录下. mkdir /data/ ...