父子间的通信,以及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 框架,简单易上手不说,教程详尽 ...
随机推荐
- Delphi解析修改Json文件，基于superobject.pas（ISuperObject）
在经过一系列的波折后,还是觉得delphi读取并修改json文件来的方便: 在网络上找到一个delphi的三方库ISuperObject,添加到项目后直接引用就行: 下载地址 ISuperObject ...
- 3. abp依赖注入的分析.md
abp依赖注入的原理剖析 请先移步参考 [Abp vNext 源码分析] - 3. 依赖注入与拦截器 本文此篇文章的补充和完善. abp的依赖注入最后是通过IConventionalRegister接 ...
- CRM、ERP是什么？
CRM 全称 Customer Relationship Management,中文意思是客户关系管理. 为什么会有CRM? 因为我们进入到了产能过剩时代,从卖方市场过渡到买方市场,为了将产品卖出去, ...
- arcgis api 4.x for js 聚合效果图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- MySQL数据篇 （一）存储过程实现简单的数据修改及事务的使用
1.需求,手动给会员新增京币,并且添加分配日志,返回修改是否成功 CREATE DEFINER=`jszapi`@`%` PROCEDURE `p_allot_user_coin`(IN `_memb ...
- 每个Web开发者都该了解的12条命令行
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://tutorialzine.com/2017/08/12-terminal-comma ...
- 关于python中的增量赋值的理解
增量赋值运算符 += 和 *= 的表现取决于它们的第一个操作对象 += 操作首先会尝试调用对象的 __ iadd__方法,如果没有该方法,那么尝试调用__add__方法,所以+= 与 + 的区别实质是 ...
- Java生鲜电商平台-服务化后的互联网架构实战(针对生鲜电商小程序或者APP)
Java生鲜电商平台-服务化后的互联网架构实战(针对生鲜电商小程序或者APP) “微服务架构”的话题非常之火,很多朋友都在小窗我,说怎么做服务化?解答“怎么做”之前,先得了解“为什么做”. 画外音:做 ...
- Java 入土之路
概述 变量与数据类型 运算符与方法 面向对象 异常处理 包装类与常量池 集合框架 多线程 网络通讯协议 socket 编程-概念未发布 socket 编程-java环境未发布 web入门 Servle ...
- 基于Git的数据库sql文件的管理——完美解决团队sql操作协同问题
目录 基于Git的数据库sql文件的管理--完美解决团队sql操作协同问题 1.产生背景 2.之前没用Git管理数据库出现的问题 2.1 用同一个库调试带来的问题 3.解决方案 3.1 Sql文件的创 ...