在项目开发中，有时候会遇到一种需求比如是：在子组件中，通过一个事件，比如点击事件，去改变父组件中的某个值，下面来看看是怎么个流程

还是先截图目录结构

父组件为app.vue，components中的文件

现在来实现在子组件Header.vue中，通过点击容器，来改变父组件App.vue中预先设定title的值

下面是子组件Header.vue

下面是父组件App.vue的代码

这样就能实现子组件通过点击事件，改变父组件预先设定的数据，并重新传给子组件

vue.js事件传值之子组件传向父组件以及$emit的使用的更多相关文章

  1. Vue.js中传值给子部件及触发动作的问题

    最近研究一个用vue.js做的程序并修改增加功能.其中用到传值给子部件等问题. template中有个子部件: <template> ...... <child-form  v-if ...

  2. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  3. vue中子组件的拆分 父组件与子组件之间的传值

    vue是组件式开发,尽量独立出子组件 prop():父组件传值给子组件 $emit():子组件传值给父组件 子组件中的设置: 使用bind <template> : default-che ...

  4. vue：子组件通过调用父组件的方法的方式传参

    在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...

  5. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

  6. Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法

    一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...

  7. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  8. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

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

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

随机推荐

  1. Zookeeper 应用实例

    配置管理 程序总是需要配置的,如果程序分散部署在多台机器上,要逐个改变配置就变得困难.好吧,现在把这些配置全部放到zookeeper上去,保存在 Zookeeper 的某个目录节点中,然后所有相关应用 ...

  2. 无线网络WPA加密算法基础

    2013-11-13 23:08 (分类:网络安全) 对无线没什么认识,总听说有人蹭网,还有卖蹭网器的,于是补充一下知识. 无线加密有两类:WEP WAP,目前采用WEP加密的非常少了,WEP应该只是 ...

  3. js位运算-按位非

    正数 取得二进制表示 取反(发现符号位是1,表示负数) 符号位不变,其余位取反 取反后加一 负数 取得负数的二进制表示(即绝对值的二进制反码加一) 取反即可

  4. 查看Linux系统内存、CPU、磁盘使用率和详细信息

    一.查看内存占用 1.free # free -m 以MB为单位显示内存使用情况 [root@localhost ~]# free -m total used free shared buff/cac ...

  5. mac下搭建http服务器（apache+php），使用homebrew升级php

    新版mac依旧预装了 Apache ,但是已经不能在 「系统偏好设置」中的「Web 共享」来开启了,需要手动通过命令行开启. 启动Apache 启动:sudo apachectl start 停止:s ...

  6. java Reflection（反射）基础知识讲解

    原文链接:小ben马的java Reflection(反射)基础知识讲解 1.获取Class对象的方式 1.1)使用 "Class#forName" public static C ...

  7. Git操作：一次性强制push所有分支

    现在手上有两个分支,master和rotation,想一次性推送所有分支,可以用--all参数来实现: git push --all origin 如果远程仓库有更改,但你需要直接推送,那就可以使用强 ...

  8. MySql学习-5.查询2

    1.聚合: 1.1 5个聚合函数: count(*):括号中写列名,或者 *: max(列):此列的最大值: min(列):此列的最小值: sum(列):此列的和: avg(列):此列的平均值: 1. ...

  9. 面向对象编程（什么是对象）——java

    一.什么是面向对象,什么是面向过 二.引入对象和类的概念 对象:是具体事物 如:小明 汽车 类: 是对对象的抽象(抽象 抽出象的部分) Person 先有具体的对象,然后抽象各个对象之间的部分,归纳出 ...

  10. 关于Synchronized研伸扩展

    代码1 synchronized方法 synchronized void method(){ .......... } 代码2 synchronized代码块 synchronized (obj){ ...