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

还是先截图目录结构

父组件为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. JAVA ReentrantLock的使用

    源码如下 对比synchronized,synchronized使用时会显示的指定一个对象(方法为调用对象,代码块会需要对象作为参数),来获取一个对象的独占锁 而ReentrantLock可能就是使用 ...

  2. Hapi+MySql项目实战环境初始化（一）

    因为项目要求特殊的原因,公司要求使用Nodejs+HApi(纯英文的API)+Mysql构建新的项目.网上找了一堆资料,看了半天一脸懵逼.结论就是:版本的差异,资料国内几乎都是旧的17年前的了.根据资 ...

  3. PHP+mysql数据库简单分页实例-sql分页

    前几天冷月写了一篇博文<php基础编程-php连接mysql数据库-mysqli的简单使用>,很多小伙伴在学习后都知道了php与mysql数据库的连接,今天冷月分享一个简单的分页实例 首先 ...

  4. 开发时从宿主机连接容器中的MySQL

    从宿主机连接Docker容器中的MySQL 刚接触Docker,电脑安装Docker后,使用docker命令pull了一个MySQL5.6的Docker镜像,之后docker run启动创建容器. 可 ...

  5. Python json格式处理

    Python json格式处理 首先放一段代码 import requests import jsonpath import json f=open('ip.txt','r',encoding='ut ...

  6. 使用Python批量更新服务器文件【新手必学】

    买了个Linux服务器,Centos系统,装了个宝塔搭建了10个网站,比如有时候要在某个文件上加点代码,就要依次去10个文件改动,虽然宝塔是可视化页面操作,不需要用命令,但是也麻烦,虽然还有git的h ...

  7. C#实现把String字符串转化为SQL语句中的In后接的参数

    实现把String字符串转化为In后可用参数代码: public string StringToList(string aa) { string bb1 = "("; if (!s ...

  8. \n不换行

    \n在js中表示换行,<br/>在html中表示换行,所以如果在设置innerHtml值时使用  \n  ,那么在页面上并不会显示换行,而在设置innerText值时使用  \n  就会显 ...

  9. Openshift中Pod的SpringBoot2健康检查

    Openshift中Pod的SpringBoot2应用程序健康检查 1. 准备测试的SpringBoot工程, 需要Java 8 JDK or greater and Maven 3.3.x or g ...

  10. 关于vector的描述

    对于有些编译器而言,使用vector<vector<int>> vec;并不能通过,必须采用vector<vector<int> >vec才可以通过.两 ...