父子间的通信,以及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 框架,简单易上手不说,教程详尽 ...
随机推荐
- 在 Spring Boot 项目中使用 activiti
新建springBoot项目时勾选activiti,或者在已建立的springBoot项目添加以下依赖: <dependency> <groupId>org.activiti& ...
- JS Math对象、日期对象、函数、定时器
Math对象 开平方:sqrt 绝对值:abs π:PI x的y次方:pow 四舍五入取整:round 向下取整:floor 向上取整:ceil 最大值:max 最小值: min 随机数:random ...
- HtEditor使用总结
最近在公司学习到ht编辑器的使用,关于使用方法上总结了一下,避免入坑.ht是做大屏数据可视化比较好的一款软件,不过多介绍,官网上有具体使用方法和展示样例,这里我整理一下我用的最多的功能. ##1.如何 ...
- iOS-关于一些取整方式
1. 直接转化 float k = 1.6; int a = (int)k; NSLog(@"a = %d",a); 输出结果是1,(int) 是强制类型转化,直接丢弃浮点数的小数 ...
- PMBOK 指南 第四章 项目整合管理（4.1-4.3）
项目整合管理 包括对隶属于项目管理过程组的各个过程和项目管理活动进行识别.定义.组合.统一和协调的各个过程. 资源分配.平衡竞争性需求.研究各种备选方法.为实现项目目标而裁剪过程.管理各个项目管理知识 ...
- SpringCloud微服务实现生产者消费者+ribbon负载均衡
一.生产者springcloud_eureka_provider (1)目录展示 (2)导入依赖 <dependency> <groupId>org.springframewo ...
- PageRank算法小结
PageRank 这个学期选了数据挖掘的课程,期末要做一个关于链接分析算法的报告,这是PR算法的小结. 算法 PR算法基于等级权威的思想,及不仅考虑指向该网页的链接数,同时也考虑指向该网页网站的重要程 ...
- 工具类Arrays.asList()方法把数组转换成集合
工具类Arrays.asList()方法把数组转换成集合 不能使用其修改集合相关的方法,它的add/remove/clear方法会抛出UnsupportedOperationException() 问 ...
- Java8新特性之接口defualt,static方法
简介 作用 Java8中接口引入了defualt,static两种方法提供默认实现,彻底打破了接口不能有默认实现的规定 static 让接口类似于工具类,提供一些静态方法 static方法不会被子类继 ...
- ELK日志分析系统(1)-基本环境搭建
1. 概述 ELK = Elasticsearch + Logstash + Kibana Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是一套开放REST和J ...