vue 子父组件之间的通信,及在调用组件的地方
这里是用了 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 子父组件之间的通信,及在调用组件的地方的更多相关文章
- Vue组件以及组件之间的通信
一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...
- js组件之间的通信
应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安 ...
- react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue组件之间的通信
1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...
- Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue组件之间的通信,父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
随机推荐
- 【noip2018】【luogu5024】保卫王国
题目描述 Z 国有nn座城市,n - 1n−1条双向道路,每条双向道路连接两座城市,且任意两座城市 都能通过若干条道路相互到达. Z 国的国防部长小 Z 要在城市中驻扎军队.驻扎军队需要满足如下几个条 ...
- mysql数据库----索引补充
1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 2.索引种类 普通索引:仅加速查询 唯一索引:加速查询 + 列值唯一(可以有 ...
- iOS之富文本(二)
之前做项目时遇到一个问题: 使用UITextView显示一段电影的简介,由于字数比较多,所以字体设置的很小,行间距和段间距也很小,一大段文字挤在一起看起来很别扭,想要把行间距调大,结 ...
- javascript和bigint
http://note.youdao.com/noteshare?id=91e21eb1d8c20025d72d7ee6f401e34d
- /etc/rc.d/里文件的作用
rc.sysinit指的是系统启动不管进哪个运行级别必须做的初始化工作, rcn.d目录指的是系统进对应n的运行级别时候系统必须做的工作,目录下S打头的服务指进此运行级别时候启动的服务,而K打头的指离 ...
- 「LibreOJ β Round #4」多项式 (广义欧拉数论定理)
https://loj.ac/problem/525 题目描述 给定一个正整数 kkk,你需要寻找一个系数均为 0 到 k−1之间的非零多项式 f(x),满足对于任意整数 x 均有 f(x)modk= ...
- Spring Cacheable 注解不缓存null值
用Cacheable注解时,发现空值,也会被缓存下来.如果我们期望空值不被缓存,可以做如下设置: @Cacheable(key = "#id", unless="#res ...
- 基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...
- 初学者必看:.NET 中的静态与非静态的异同
对于初学者来说,.NET 的静态和非静态一直比较难掌握,这里做一个总结,介绍静态类和普通类,静态方法和实例方法,静态构造函数和实例构造函数,静态字段和非静态字段的区别. 静态类 vs 普通类 静态类与 ...
- 【BZOJ】2125: 最短路 圆方树(静态仙人掌)
[题意]给定带边权仙人掌图,Q次询问两点间最短距离.n,m,Q<=10000 [算法]圆方树处理仙人掌问题 [题解]树上的两点间最短路问题,常用倍增求LCA解决,考虑扩展到仙人掌图. 先对仙人掌 ...