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

还是先截图目录结构

父组件为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. php curl 相关知识

      整理了下curl  $ch = curl_init(); # 设定url和把结果返回,是否返回头部 curl_setopt($ch, CURLOPT_URL, 'http://www.baidu. ...

  2. javascirpt获取随机数

    /* getran(min, max, n): 获取min与max之间的随机数 n: n保留浮点数数量 */ function getran(min, max, n){ return Number(( ...

  3. 论文《A Generative Entity-Mention Model for Linking Entities with Knowledge Base》

    A Generative Entity-Mention Model for Linking Entities with Knowledge Base   一．主要方法 提出了一种生成概率模型,叫做en ...

  4. Webpack之魔法注释/* webpackChunkName:"lodash" */的做用

    之前在vue的路由配置文件中看到了/* webpackChunkName:"lodash" */这个注释, 在学习了webpack之后了解其做用,作用就是webpack在打包的时候 ...

  5. js—二进制中1的个数

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 做题思路 代码 function NumberOf1(n) { // write code here var cnt = 0 ...

  6. 你一定看得懂的 DDD+CQRS+EDA+ES 核心思想与极简可运行代码示例

    前言 随着分布式架构微服务的兴起,DDD(领域驱动设计).CQRS(命令查询职责分离).EDA(事件驱动架构).ES(事件溯源)等概念也一并成为时下的火热概念,我也在早些时候阅读了一些大佬的分析文,学 ...

  7. 题解【[USACO05NOV]奶牛玩杂技】

    \[ \texttt{Description} \] 有 \(n\) 头牛,每头牛都有自己的体重 \(W_i\) 和力量 \(S_i\) . 将这 \(n\) 头牛摞在一起,每头牛的压扁指数定义为:压 ...

  8. java设计模式 - 单例模式（干货）

    深度讲解23种设计模式,力争每种设计模式都刨析到底.废话不多说,开始第一种设计模式 - 单例. 作者已知的单例模式有8种写法,而每一种写法,都有自身的优缺点. 1,使用频率最高的写法,废话不多说,直接 ...

  9. StarUML之一、UML的相关基本概念

    为什么用UML 项目需要,在项目开发实现前期进行框架技术设计(条条大路通罗马通罗马,画图或者写代码都可以,适合就可以!). 用户的交互我们通常用Axure(原型设计)体现, 框架和功能结构设计则用UM ...

  10. Java工作流系统jflow从表功能介绍一

    关键词:工作流快速开发平台  工作流流设计  业务流程管理   asp.net 开源工作流  bpm工作流系统  java工作流主流框架  自定义工作流引擎 表单设计器  流程设计器 从表也叫明细表, ...