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

还是先截图目录结构

父组件为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. 06-Spring03-事务管理

    今日知识 1. Spring事务管理 2. 转账案例 Spring事务管理 1. 事务特性(ACID) 1. 原子性:整体 [原子性是指事务包含的所有操作要么全部成功,要么全部失败] 2. 一致性:数 ...

  2. javascript Date对象 js全部的 时间属性 和 方法

    Date() 返回当日的日期和时间. getTime() 返回 1970 年 1 月 1 日至今的毫秒数. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31).天 getDa ...

  3. 能否不同udp socket绑定到同一IP地址和port

    http://www.softlab.ntua.gr/facilities/documentation/unix/unix-socket-faq/unix-socket-faq-4.html http ...

  4. 隐藏Web Shell

    隐藏Webshell $ sudo echo -e "<?=\`\$_POST[1]\`?>\r<?='PHP Test';?>" > test.ph ...

  5. Flutter Widgets 之 InkWell 和 Ink

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell组件在用户点击时出现&quo ...

  6. java开发学生信息管理系统 源码

    开发环境:    Windows操作系统开发工具: Eclipse+Jdk+Tomcat+MYSQL数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php?mo ...

  7. CentOS安装python3环境

    CentOS7.4安装python3环境 (Python 3.8.1) (stable version, Dec.18, 2019) # .从官网下载Python - Dec. , [stable v ...

  8. Linux 简介、目录结构

    Linux是类 Unix 操作系统. 根据原生程度可分为: 内核版本 发行版本:一些公司.组织在内核版的基础上进行二次开发 根据市场需求可分为: 服务器版:没有好看的界面,在终端操作,类似于dos 桌 ...

  9. SDRAM的引脚封装标准

    SDRAM从发展到现在已经经历了五代,分别是:第一代SDR SDRAM,第二代DDR SDRAM,第三代DDR2 SDRAM,第四代DDR3 SDRAM,第五代DDR4 SDRAM.第一代SDRAM采 ...

  10. nginx location展示及文件共享

    nginx 目录展示及文件访问 效果: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5G9wfKK-1570116907804)(E:\Users\FangJunX ...