vue通信之子父组件通信
子父组件通信:
创建一个父组件 Home , 创建一个子组件 Head
Home 组件:
import Head from "./Head.vue" // 引入 Head 组件 components:{
"v-head":Head // 注册 head 组件
}
Head 组件:
<button @click="toPar()">传递给父组件</button> // 点击事件触发
data(){
return{
msg:"传递给父组件的信息"
}
},
methods:{ toPar(){ this.$emit("toParent",{msg:this.msg}) // $emit 触发传递自定义的事件,{} 对象里可以传递数据 } }
Home 组件:
<v-head @toParent="getData"></v-head> // @toParent 通过触发的事件,调用 父组件中定义的事件
methods:{
getData(data){
console.log(data); // 打印传递过来的数据
}
}
控制台打印数据:
{msg: "传递给父组件的信息"}
子组件 通过 $emit 触发传递自定义事件,及数据,在父组件中子组件标签上 @自定义事件,调用父组件定义事件,这样,就实现了子父组件之间的通信
vue通信之子父组件通信的更多相关文章
- vue子父组件通信
之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- vue之子父组件通信
一. 子-父组件间通信: let children = { # 定义子组件 template: `<div> <button @click="send"&g ...
- VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- 2.Vue子组件给父组件通信
子组件给父组件通信 如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的 子组件: <te ...
- Vue:子组件如何跟父组件通信
我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即 ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
随机推荐
- oracle 主键自增并获取自增id
1 创建表 /*第一步:创建表格*/ create table t_user( id int primary key, --主键,自增长 username varchar(20), password ...
- 感想 - 猴子刷视频app
看到一个视频,内容是一只猿猴熟练地像人一样刷短视频app,惟妙惟肖:https://pan.baidu.com/s/10-eibLmuybKtRJ-CKnruYA 抽象思考和语言才是人类独有的能力,视 ...
- IP地址与子网掩码逐位相与
逐位相与说的其实就是子网掩码与网络地址相同位置的数字相加,当和为2的时候该位置写作1,否则的话写作0
- Manjaro系统和软件安装记录
Linux桌面环境 ArchLinux官方wiki manjaro官方wiki pacman官方wiki 从www.distrowatch.com可以查看Linux发行版排行榜,可以看到manjar ...
- 匿名函数 python内置方法(max/min/filter/map/sorted/reduce)面向过程编程
目录 函数进阶三 1. 匿名函数 1. 什么是匿名函数 2. 匿名函数的语法 3. 能和匿名函数联用的一些方法 2. python解释器内置方法 3. 异常处理 面向过程编程 函数进阶三 1. 匿名函 ...
- Java面试之基础篇(1)
1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...
- CSS背景和CSS3背景background属性
css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...
- React Native 中 跨页面间通信解决方案之 react-native-event-bus
https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...
- getCurrentPages
解释:getCurrentPages 全局函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面. 示例: // index.jsPage({ onShow( ...
- jquery ajax实现文件上传
test5.html <html> <head> <meta http-equiv="Content-Type" content="text ...