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

还是先截图目录结构

父组件为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 自学简单框架（反射+注解）

    1.先定义一个学生类 2.再定义一个teacher类(这个是为了练习多个注解,自己练习可以 不写这个) 3.再定义个一个学生老师类(这个是为了最终调用上面的那个学生类做准备) 4.下面开始真正的写框架 ...

  2. Webpack 中 file-loader 和 url-loader 的区别

    如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用u ...

  3. 谈下slot-scope

    Vue里有个slot插槽的概念,常用的一般是命名的slot和默认的slot, 这里谈下slot-scope,Vue2.6后改成v-slot slot-scope场景是父组件用子组件的数据,但是样式自己 ...

  4. python基础入门之二 —— 条件、循环语句

    1.条件语句 if if…else… 多重if if嵌套 三目运算符 (化简的if else) if 条件:   条件成立执行代码1   条件成立执行代码2 if False: print('if判断 ...

  5. Ubuntu系统下使用php7+mysql+apache2搭建自己的博客

    很多人都有写博客的习惯,奈何国内的博客网站正在一家家地关闭与重整,部分博客网站也充斥着太多的广告,使用体验非常不好.对于爱写博客的朋友来说,其实还有一个更好的选择,那就是自己搭建一个博客. 搭建一个自 ...

  6. ELK学习003：Elasticsearch启动常见问题

    一.Caused by: java.lang.RuntimeException: can not run elasticsearch as root 这个错误,是因为使用root用户启动elastic ...

  7. Mac搭建本地服务器并映射到外网

    最近在学习Html,小有进步变想着写一个浪漫的静态页面给女朋友浪漫一下,那么问题就来了,如何把我的网页让对网络一窍不通的女朋友看到,所以便想到了是用自己电脑作为服务器的想法.百度以后整理如下: 首先搭 ...

  8. linux centos7 非root用户安装源码版docker

    注意:非root用户必须要有sudo权限 一.安装前的准备 1.查看当前主机是否有docker组 若没有输出结果则新建 再次查看,发现已经有了docker组 2.新增拥有sudo权限的用户(若知道ro ...

  9. 经济学人精读笔记7：动乱当道，你还想买LV吗？

    2020/2/24 经济学人精读笔记7:动乱当道,你还想买LV吗? 标签(空格分隔): 经济学人 Part 1 Luxury goods A tale of two handbags Purveyor ...

  10. POJ-2299 Ultra-QuickSort（用树状数组求逆序对数）

    题目链接 ac代码 #include<iostream> #include<cstdio> #include<cstring> #include<algori ...