vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//父亲调用子组件的方法,子组件暴露一些方法让父组件调用
// ref如果写在dom上,表示获取dom,如果写在组件上,表示当前组件的实例
let vm=new Vue({
el:"#app",
template:'<child ref="c"></child>',
//一定要放在mounted下面,因为mounted方法表示数据和视图渲染完成,
mounted(){
//当前的ref指向的是child组件的实例,通过实例调用下面的fn方法
this.$refs.c.fn();
},
components:{
child:{
template:'<div>child</div>',
methods:{
fn(){
alert("子子")
}
}
}
}
})
</script>
</html>
vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用的更多相关文章
- Android--Otto事件总线 -- 组件之间通讯框架使用 --模式解析
前言:Otto事件总线 -- 组件之间通讯框架 对于之前的情况activity之间或者fragment之间等跳转传值一般都是用bundle.intent等,从activityA --- activit ...
- Angular 发布订阅模式实现不同组件之间通讯
在我们项目中要实现不同组件之间通讯,Angular的@Input和@Output只能实现有父子组件的限制,如果是复杂跨组件实现不同组件可以通过共享变量的方式实现,比如这个博客的思路:https://w ...
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...
- vue.js 利用组件之间通讯,写一个弹出框例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Angular组件之间通讯
组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...
- angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/ope ...
- React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)
本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue.js 兄弟组件传值
另: 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...
随机推荐
- bzoj 1782: [Usaco2010 Feb]slowdown 慢慢游【dfs序+线段树】
考虑每头牛到达之后的影响,u到达之后,从1到其子树内的点需要放慢的都多了一个,p为u子树内点的牛ans会加1 用线段树维护dfs序,每次修改子树区间,答案直接单点查询p即可 #include<i ...
- 洛谷P3400 仓鼠窝(单调栈)
P3400 仓鼠窝 题目描述 萌萌哒的Created equal是一只小仓鼠,小仓鼠自然有仓鼠窝啦. 仓鼠窝是一个由n*m个格子组成的行数为n.列数为m的矩阵.小仓鼠现在想要知道,这个矩阵中有多少个子 ...
- Parameterized testing with any Python test framework
1. 在进行单元测试时,很多时候需要进行参数化 尝试过使用 from nose_parameterized import parameterized 但在使用过程中会报错,后来将上面的内容改为了下面的 ...
- hash+set Codeforces Round #291 (Div. 2) C. Watto and Mechanism
题目传送门 /* hash+set:首先把各个字符串的哈希值保存在set容器里,然后对于查询的每一个字符串的每一位进行枚举 用set的find函数查找是否存在替换后的字符串,理解后并不难.另外,我想用 ...
- composer windows安装,使用新手入门[转]
原:https://blog.csdn.net/csdn_dengfan/article/details/54912039 一.前期准备: 1.下载安装包,https://getcomposer.or ...
- CF817B Makes And The Product
思路: 模拟,数学. 实现: #include <iostream> #include <cstdio> #include <algorithm> using na ...
- 判断IE浏览器的类型以及提示信息(低版本浏览器不予显示)
//浏览器IE版本判断(function(window) { var theUA = window.navigator.userAgent.toLowerCase(); if ((theU ...
- (2)HTML元素与属性(已入垃圾框)
HTML元素 开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag) HTML 文档由嵌套的 HTML 元素构成 以上实例包含了七个 HTML 元素 &l ...
- Web性能测试术语
并发用户: 并发一般分为2种情况.一种是严格意义上的并发,即所有的用户在同一时刻做同一件事情或者操作,这种操作一般指做同一类型的业务.比如在信用卡审批业 务中,一定数目的用户在同一时刻对已经完成的审批 ...
- 处理sql锁死问题
--SQL Server死锁的查询方法: exec master.dbo.p_lockinfo 0,0; ---显示死锁的进程,不显示正常的进程 exec master.dbo.p_locki ...