这里是用了 element ui 你们也可以看一下管方的文档 http://element.eleme.io/#/zh-CN/component/installation

组件html

<div class="Hander">
<el-row :gutter="20">
<el-col :span="4"><div class="back" @click="Back"><i class="el-icon-arrow-left"></i></div></el-col>
<el-col :span="16"><div class="bg-purple">{{HanderTitle}}</div></el-col>
<el-col :span="4"><div @click="PublicSave">{{saveTitle}}</div></el-col>
</el-row>
</div>

js

$emit 一是DOM绑定事件,二是自定义事件。可以传递参数我在这里用到就没有写

  methods: {
PublicSave() {
this.$emit("Public");
},
},

然后在引用组件的页面去调用emin定义的方法名也就是Public

html

  <hander @Public="PublicSave"></hander>    //Public是在组件emin自定义的方法

js

  import hander from "@/components/Hander";
methods: {
PublicSave() {
alert("1");
}
},

我实现的效果吧就是把app hander头部定义为组件,因为组件里面有自定义标题和右边有保存,跳转页面。每个页面的业务不一样,所以需要通信 emin 来实现 。

vue 子父组件之间的通信,及在调用组件的地方的更多相关文章

  1. Vue组件以及组件之间的通信

    一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...

  2. js组件之间的通信

    应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安 ...

  3. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  4. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  5. vue组件之间的通信

    1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...

  6. Vue 组件&组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

  7. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  8. vue组件之间的通信,父子之间的数据通信

    父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...

  9. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  10. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

随机推荐

  1. 【learning】01分数规划

    问题描述 首先分数规划是一类决策性问题 一般形式是: \[ \lambda=\frac{f(x)}{g(x)} \] 其中\(f(x)\)和\(g(x)\)都是连续的实值函数,然后要求\(\lambd ...

  2. win7系统用笔记本共享wifi热点 让手机免费上网

    之前一直在用这个方法把自己的笔记本变成一个wifi热点,让手机也可以直接连wifi上网,节省网费和路由器购买费. 其实就是开启了windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP ...

  3. struts2 - View页面中获取Action的成员变量

    struts2 - View页面中获取Action的成员变量 2016年03月02日 11:04:44 IT男青年 阅读数:1074   View页面中获取Action的成员变量 按照Struts的设 ...

  4. Nginx基本功能极速入门

    http://xxgblog.com/2015/05/17/nginx-start/ 本文主要介绍一些Nginx的最基本功能以及简单配置,但不包括Nginx的安装部署以及实现原理.废话不多,直接开始. ...

  5. [LeetCode] 27. Remove Element ☆

    Given an array and a value, remove all instances of that value in place and return the new length. D ...

  6. Code::Blocks之自动打开上次未关闭工作空间

    问题:如何设置Code::Blocks,使每次打开软件时,自动打开上次未关闭的工作空间? 设置(S) -> 环境设置...(E) -> 常规设置: 勾选"在程序启动时" ...

  7. each()和eq()

    今天工作的时候要遍历一个表格,于是我就想到了each(),也没看文档就开始写,大概是这么写的 $(".class").each(function(){ this.click(fun ...

  8. Web 开发者易犯的5大严重错误

    无论你是编程高手,还是技术爱好者,在进行Web开发过程中,总避免不了犯各种各样的错误. 犯了错误,可以改正.但如果犯了某些错误,则会带来重大损失.遗憾.令人惊讶的是,这些错误往往是最普通,最容易避免. ...

  9. 机器学习-kNN-寻找最好的超参数

    一 .超参数和模型参数 超参数:在算法运行前需要决定的参数 模型参数:算法运行过程中学习的参数 - kNN算法没有模型参数- kNN算法中的k是典型的超参数 寻找好的超参数 领域知识 经验数值 实验搜 ...

  10. JWT 拓展

    JWT适用场景 https://www.jianshu.com/p/af8360b83a9f 适用于一次性操作的认证,颁布一个很短过期时间的JWT给浏览器. 无状态的JWT无法实现精确的在线人数统计. ...