父子间的通信,以及ref
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>父子通信及ref</title>
<script src="js/vue.js"></script>
</head>
<!--
父子间通信,以及ref的用法
父->子: 父自定义属性,子通过props接收,props有多种形式接收,也可以接收多个参数.[name1,name2,name3,...],也可以是字符串,
对象形式 props:{
name1:String,
name2:[String,Number],
name3:{
type:String, //类型 String, Number, Boolean, Function, Object, Array, Symbol
required:true, //是否为必填 true, false
default:"默认值",//不填写的情况下显示默认值 自定义
validator:function(v){
//自定义验证方法
return xxx;
} } }
子->父: 子通过绑定在自身的事件(例:@click)来触发$emit自定义事件,父通过监听$emit自定义事件来触发 ref:通过指定的ref的name来操作它,this.$refs.name.xxx -->
<body>
<div id="app">
<div ref="first" @click="getInnerHtml">{{message}}</div>
<guan-meng-hui @sendaddnum="getAddNum" ref="one"></guan-meng-hui>
<guan-meng-hui @sendaddnum="getAddNum" ref="two"></guan-meng-hui>
<div>{{total}}</div>
<child-div msg="你好,我是父亲"></child-div>
</div> <script>
var con={
template:"<div @click='clickAddNum'>{{num}}</div>",
data:function(){
return {
num:0
}
},
methods:{
clickAddNum(){
this.num++;
//子传父通信
this.$emit("sendaddnum");
}
}
}
//父传子通信 props
var child={
template:"<div>{{msg}}</div>",
data(){
return {
}
},
created(){
console.log(this.msg)
},
props:['msg'] } var app = new Vue({
el: "#app",
data:{
message:"hello nihao",
total:0
},
created(){
console.log(con)
},
methods:{
getInnerHtml(){
console.log(this.$refs.first.innerHTML)
},
getAddNum(i){
this.total= this.$refs.one.num + this.$refs.two.num;
}
},
components:{
guanMengHui:con,
childDiv:child
}
})
</script> </body> </html>
父子间的通信,以及ref的更多相关文章
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- Vue 父子组件间的通信
前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- angular组件间的通信（父子、不同组件的数据、方法的传递和调用）
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
- c# 进程间的通信实现之一简单字符串收发
使用Windows API实现两个进程间(含窗体)的通信在Windows下的两个进程之间通信通常有多种实现方式,在.NET中,有如命名管道.消息队列.共享内存等实现方式,这篇文章要讲的是使用Wi ...
- Unix系统中，两个进程间的通信
进程之间通常需要进行数据的传输或者共享资源等,因此进程间需要通讯. 可以通过管道,信号,消息队列,共享内存,信号量和套接字等方式 FIFO表示命名管道,这种管道的操作是基于先进先出原理. PIPE 表 ...
- C#与USB HID间的通信
原文:C#与USB HID间的通信 C#与USBHID接口的通讯相对于与串口间的通讯较为复杂,其中需要多次调用到Windows的一些API.其原理编者尚未全部理清,以下提供简单的USBHID通讯流程. ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
随机推荐
- Task.Factory.StartNew 测试
到底该用多少线程?线程数.CPU核心数.本地计算时间.等待时间的关系 线程数 = CPU核心数 * ( 本地计算时间 + 等待时间 ) / 本地计算时间 下面是Task.Factory.StartNe ...
- javascript中引用传递的问题如何解决
我们有时候会向一个方法中传入一个参数,并且对这个参数做一些处理的操作: 但是因为是引用传递,处理过后会对原有的对象造成修改,无法进行反复使用. 如例子: 两次打印的结果一模一样.这样下一个方法在继续使 ...
- Stm32使用串口空闲中断，基于队列来接收不定长、不定时数据
串口持续地接收不定长.不定时的数据,把每一帧数据缓存下来且灵活地利用内存空间,下面提供一种方式供参考.原理是利用串口空闲中断和DMA,每当对方发来一帧完整的数据后,串口接收开始空闲,触发中断,在中断处 ...
- [转]加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用
原文链接:http://www.cnblogs.com/sochishun/p/7028056.html 加密技术通常分为两大类:"对称式"和"非对称式". 对 ...
- .Net Core WebApi 模型验证无效时报400
问题 模型验证无效时,没有进入到接口里,而是直接报400 Bad Request,非常不友好. 环境 SDK:.Net Core 2.2.401 开发工具:VS2017 step 1 创建接口 /// ...
- 磁盘修复 mount: wrong fs type running e2fsck
当服务器或PC机器的硬盘在使用一段时间后,会出现无法使用正常进行使用: 1. 当将文件系统挂载到指定的目录的时候,会出现mount 失败,如下图: [root@template ~]# mount / ...
- Azure 上的高可用概念
更多内容,添加公众号关注: 场景一: 某智能家居厂家,用户喊出“小X同学,帮我扫地”后,服务器宕机了,扫地机器人不能立即启动,于是,用户可能再连续喊几次后,无奈又习惯的按下了扫地机器人的启动按钮. 场 ...
- 基于Redis消息的订阅发布应用场景
目录 基于Redis消息的订阅发布应用场景 1.应用背景 2.困境 2.1 锁表风险 2.2 实时性差 2.3 增加编程复杂性 2.4 实时效果 3.解决方案 3.1 前端传值给服务端 3.2 服务端 ...
- 团队项目之Scrum5
小组:BLACK PANDA 时间:2019.11.25 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 实现文章展示页面 完善后台的编辑功能接口 今天计划完成的工作 2 ...
- IP安全，DDoS攻击、tearDrop攻击和微小IP碎片攻击
目录 arp安全 IP报文格式 DoS攻击 tear drop攻击 微小碎片攻击 IP欺骗,留后门 arp安全 以太网帧的type =0806 表示arp arp攻击:hack伪造arp应答包给tar ...