<!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组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用的更多相关文章
	

    
						
  1. Android--Otto事件总线 -- 组件之间通讯框架使用 --模式解析
		
    前言:Otto事件总线 -- 组件之间通讯框架 对于之前的情况activity之间或者fragment之间等跳转传值一般都是用bundle.intent等,从activityA --- activit ...
    
		
    2. 
						
  2. Angular 发布订阅模式实现不同组件之间通讯
		
    在我们项目中要实现不同组件之间通讯,Angular的@Input和@Output只能实现有父子组件的限制,如果是复杂跨组件实现不同组件可以通过共享变量的方式实现,比如这个博客的思路:https://w ...
    
		
    3. 
								
  3. vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子，儿子更改数据后，重新发送给父亲，父亲数据更改后，属性会重新发送个儿子，儿子刷新新数据
		
    vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...
    
		
    4. 
						
  4. vue.js 利用组件之间通讯，写一个弹出框例子
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    5. 
						
  5. Angular组件之间通讯
		
    组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...
    
		
    6. 
						
  6. angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
		
    工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/ope ...
    
		
    7. 
						
  7. React组件之间通过Props传值的技巧(小案例，帮助体会理解props、state、受控组件和非受控组件等)
		
    本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...
    
		
    8. 
						
  8. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
		
    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
    
		
    9. 
						
  9. vue.js 兄弟组件传值
		
    另:  在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. java程序死锁，3种方式快速找到死锁代码
			
    java程序中出现死锁问题,如果不了解排查方法,是束手无策的,今天咱们用三种方法找到死锁问题. 运行下面代码 package com.jvm.visualvm; /** * <a href=&q ...
    
			
    2. 
						
  2. 洛谷 P1462 通往奥格瑞玛的道路（spfa+二分搜索）（4boy）
			
    原题:http://www.luogu.org/problem/show?pid=1462#sub 4boy: 大意:给出n个城市,有m条路,每经过一个城市都要交钱,每经过一条道路都要扣HP,有HP上 ...
    
			
    3. 
						
  3. JD笔试
			
    题目表述: 给定n道题目,以及每道题目答对的概率,问小明能及格的概率. 样例: 40 50 50 50 50 0.31250 思路: 递归枚举对的题目个数,最后TLE之过40%: 知道正确解法是DP, ...
    
			
    4. 
						
  4. 395 Longest Substring with At Least K Repeating Characters 至少有K个重复字符的最长子串
			
    找到给定字符串(由小写字符组成)中的最长子串 T , 要求 T 中的每一字符出现次数都不少于 k .输出 T 的长度.示例 1:输入:s = "aaabb", k = 3输出:3最 ...
    
			
    5. 
						
  5. Previous operation has not finished; run 'cleanup' if it was interrupted.SVN报错
			
    原因: 错误的原因是SVN管理的文件夹改名.删除文件太过频繁,导致有操作挂起了. 解决方式: 1.百度sqlite3.exe并下载. 2.将该文件解压到项目根目录下的.svn文件夹中. 3.打开cmd ...
    
			
    6. 
						
  6. ValueError: multi-byte encodings are not supported
			
    pyton解析xml时,报错 是因为编码的问题,把xml的头 <?xml version="1.0" encoding="gb2312"?> 改成  ...
    
			
    7. 
						
  7. Spark学习之数据读取与保存（4）
			
    Spark学习之数据读取与保存(4) 1. 文件格式 Spark对很多种文件格式的读取和保存方式都很简单. 如文本文件的非结构化的文件,如JSON的半结构化文件,如SequenceFile结构化文件. ...
    
			
    8. 
						
  8. 程序员必知的LinuxShell命令
			
    程序员必知的LinuxShell命令 grep (Globle Regular Expression Print全局正则表达式) 命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的 ...
    
			
    9. 
						
  9. Python之数据规整化：清理、转换、合并、重塑
			
    Python之数据规整化:清理.转换.合并.重塑 1. 合并数据集 pandas.merge可根据一个或者多个不同DataFrame中的行连接起来. pandas.concat可以沿着一条轴将多个对象 ...
    
			
    10. 
						
  10. C# 调用Mysql 带参数存储过程
			
    使用C#调用Mysql 带参数的存储过程: 1.创建带参数的存储过程:USP_Temp_Test 2.两个参数:IN 参数为 P_XML , OUT 参数为 P_ErrorOut 3.C#代码调用该存 ...
    
			
    11.