子父组件通信:

创建一个父组件 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通信之子父组件通信的更多相关文章

  1. vue子父组件通信

    之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...

  2. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  3. vue之子父组件通信

    一. 子-父组件间通信: let children = {    # 定义子组件 template: `<div> <button @click="send"&g ...

  4. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  5. 2.Vue子组件给父组件通信

    子组件给父组件通信 如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的 子组件: <te ...

  6. Vue:子组件如何跟父组件通信

    我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即 ...

  7. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  8. React子组件和父组件通信

    React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...

  9. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

随机推荐

  1. oracle 主键自增并获取自增id

    1 创建表 /*第一步:创建表格*/ create table t_user( id int primary key, --主键,自增长 username varchar(20), password ...

  2. 感想 - 猴子刷视频app

    看到一个视频,内容是一只猿猴熟练地像人一样刷短视频app,惟妙惟肖:https://pan.baidu.com/s/10-eibLmuybKtRJ-CKnruYA 抽象思考和语言才是人类独有的能力,视 ...

  3. IP地址与子网掩码逐位相与

    逐位相与说的其实就是子网掩码与网络地址相同位置的数字相加,当和为2的时候该位置写作1,否则的话写作0

  4. Manjaro系统和软件安装记录

    Linux桌面环境  ArchLinux官方wiki manjaro官方wiki pacman官方wiki 从www.distrowatch.com可以查看Linux发行版排行榜,可以看到manjar ...

  5. 匿名函数 python内置方法(max/min/filter/map/sorted/reduce)面向过程编程

    目录 函数进阶三 1. 匿名函数 1. 什么是匿名函数 2. 匿名函数的语法 3. 能和匿名函数联用的一些方法 2. python解释器内置方法 3. 异常处理 面向过程编程 函数进阶三 1. 匿名函 ...

  6. Java面试之基础篇(1)

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...

  7. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  8. React Native 中 跨页面间通信解决方案之 react-native-event-bus

    https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...

  9. getCurrentPages

    解释:getCurrentPages 全局函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面. 示例: // index.jsPage({ onShow( ...

  10. jquery ajax实现文件上传

    test5.html <html> <head> <meta http-equiv="Content-Type" content="text ...