父子间的通信,以及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 框架,简单易上手不说,教程详尽 ...
随机推荐
- Python活力练习Day2
Day2:求1000以内的素数 #素数:除了1和它本身外,不能被其他自然数整除 #判断素数的方法:1).暴力法:从2到n-1每个数均整除进行判断 2).开根号法:从2到sqrt(n)均做整除判断( ...
- 如何快速将多个excel表格的所有sheet合并到一个sheet中
1.将需要合并的excel文件放在同一个文件夹下: 2.新建一个excel表格并打开,右键sheet1,查看代码,然后复制下方的代码到代码框里,点击菜单栏中的“运行”–“运行子过程/用户窗体”,等待程 ...
- 1.Android-入门之系统架构介绍
1.Android 系统架构 android分为四个层,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心层,如下图所示: 2.application应用程序层 该层提供一些核 ...
- ESP32的NVS使用指南
NVS总的来说,就是非易失性存储,类似MCU EEPROM,但实际上调用ESP32这些函数,数据是存储在FLASH中的. 它的管理方式类似数据库的表,在NVS里面可以存储很多个不同的表,每个表下面有不 ...
- 推荐一种非常好的新版DSP库源码移植方式，含V7，V6和V5的IAR以及MDK5的AC5和AC6版本
说明: 1.新版CMSIS V5.6里面的DSP库比以前的版本人性化了好多. 2.本帖为大家分享一种源码的添加方式,之前一直是用的库方便,不方便查看源码部分. 3.DSP教程可以还看第1版的,在我们的 ...
- CGI environment variables
- 05-深入python的set和dict
一.深入python的set和dict 1.1.dict的abc继承关系 from collections.abc import Mapping,MutableMapping #dict属于mappi ...
- CentOS7环境下安装docker
操作系统 : CentOS7.5.1804_x64 docker版本: docker-ce-18.06.3 准备环境 1.如之前安装过移除老旧版本 yum remove docker docker-c ...
- linux查看磁盘及文件夹大小命令
https://www.runoob.com/w3cnote/linux-view-disk-space.html 1.使用lsof查看已删除但未释放的文件 lsof -n | grep delete ...
- ES-索引操作
参考: https://es.xiaoleilu.com/030_Data/05_Document.html <ELasticsearch in Action> 以下的操作在ES7.5版本 ...