1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>父子通信及ref</title>
  7.         <script src="js/vue.js"></script>
  8.     </head>
  9.     <!--
  10.         父子间通信,以及ref的用法
  11.         父->子: 父自定义属性,子通过props接收,props有多种形式接收,也可以接收多个参数.[name1,name2,name3,...],也可以是字符串,
  12.                 对象形式 props:{
  13.                             name1:String,
  14.                             name2:[String,Number],
  15.                             name3:{
  16.                                 type:String, //类型 String, Number, Boolean, Function, Object, Array, Symbol
  17.                                 required:true, //是否为必填 true, false
  18.                                 default:"默认值",//不填写的情况下显示默认值 自定义
  19.                                 validator:function(v){
  20.                                     //自定义验证方法
  21.                                     return xxx;
  22.                                 }
  23.  
  24.                             }
  25.  
  26.                         }
  27.         子->父: 子通过绑定在自身的事件(例:@click)来触发$emit自定义事件,父通过监听$emit自定义事件来触发
  28.  
  29.         ref:通过指定的ref的name来操作它,this.$refs.name.xxx
  30.  
  31.     -->
  32.     <body>
  33.         <div id="app">
  34.             <div ref="first" @click="getInnerHtml">{{message}}</div>
  35.             <guan-meng-hui @sendaddnum="getAddNum" ref="one"></guan-meng-hui>
  36.             <guan-meng-hui @sendaddnum="getAddNum" ref="two"></guan-meng-hui>
  37.             <div>{{total}}</div>
  38.             <child-div msg="你好,我是父亲"></child-div>
  39.         </div>
  40.  
  41.         <script>
  42.             var con={
  43.                 template:"<div @click='clickAddNum'>{{num}}</div>",
  44.                 data:function(){
  45.                     return {
  46.                         num:0
  47.                     }
  48.                 },
  49.                 methods:{
  50.                     clickAddNum(){
  51.                         this.num++;
  52.                         //子传父通信
  53.                         this.$emit("sendaddnum");
  54.                     }
  55.                 }
  56.             }
  57.             //父传子通信 props
  58.             var child={
  59.                 template:"<div>{{msg}}</div>",
  60.                 data(){
  61.                     return {
  62.                     }
  63.                 },
  64.                 created(){
  65.                     console.log(this.msg)
  66.                 },
  67.                 props:['msg']
  68.  
  69.             }
  70.  
  71.             var app = new Vue({
  72.                 el: "#app",
  73.                 data:{
  74.                     message:"hello nihao",
  75.                     total:0
  76.                 },
  77.                 created(){
  78.                     console.log(con)
  79.                 },
  80.                 methods:{
  81.                     getInnerHtml(){
  82.                         console.log(this.$refs.first.innerHTML)
  83.                     },
  84.                     getAddNum(i){
  85.                         this.total= this.$refs.one.num + this.$refs.two.num;
  86.                     }
  87.                 },
  88.                 components:{
  89.                     guanMengHui:con,
  90.                     childDiv:child
  91.                 }
  92.             })
  93.         </script>
  94.  
  95.     </body>
  96.  
  97. </html>

父子间的通信,以及ref的更多相关文章

  1. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  3. Vue 父子组件间的通信

    前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...

  4. vue组件父子间通信之综合练习--假的聊天室

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. angular组件间的通信（父子、不同组件的数据、方法的传递和调用）

    angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...

  6. c# 进程间的通信实现之一简单字符串收发

       使用Windows API实现两个进程间(含窗体)的通信在Windows下的两个进程之间通信通常有多种实现方式,在.NET中,有如命名管道.消息队列.共享内存等实现方式,这篇文章要讲的是使用Wi ...

  7. Unix系统中，两个进程间的通信

    进程之间通常需要进行数据的传输或者共享资源等,因此进程间需要通讯. 可以通过管道,信号,消息队列,共享内存,信号量和套接字等方式 FIFO表示命名管道,这种管道的操作是基于先进先出原理. PIPE 表 ...

  8. C#与USB HID间的通信

    原文:C#与USB HID间的通信 C#与USBHID接口的通讯相对于与串口间的通讯较为复杂,其中需要多次调用到Windows的一些API.其原理编者尚未全部理清,以下提供简单的USBHID通讯流程. ...

  9. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

随机推荐

  1. dataguard ORA-12514: TNS:listener does not currently know of service requested in connect descriptor

    错误的意思是listener 不知道连接解析器中的请求服务,这里要说静态监听和动态监听了动态注册是在instance启动的时候PMON进程根据init.ora中的instance_name,servi ...

  2. MQ报错2009/2085解决方法

    1.1. 响应2009错误 1.1.1.   涉及协议 MQ,调试回放阶段 1.1.2.   错误信息 完成码2原因为2009 1.1.3.   可能原因 远端MQ连接数不足,拒绝连接 1.1.4.  ...

  3. java基础 - 锁

    ------------------------ 参考: https://www.cnblogs.com/hustzzl/p/9343797.html https://blog.csdn.net/qq ...

  4. 微信小程序之启动页的重要性

    启动页在APP中是个很常见的需求,为什么对于小程序来说也非常重要呢?首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤,到最后为什么要加启动页,看完你就明白了. 小程序的首页需要展示用户关注的小 ...

  5. DRF单表序列化和反序列化

    安装 djangorestframework pip install djangorestframework 将rest_framework注册到app上 INSTALLED_APPS = [ 're ...

  6. jquery 点击tr选中checkbox，解决checkbox的默认点击事件被阻止的问题

        1.第一种,!$(event.target).is('input'),判断触发事件的元素是否为input.此时使用event.target,而不是this,获取事件本身,防止触发事件冒泡的问题 ...

  7. 流程图软件 drawio 免费 github开源

    做程序需要画流程图,发现迅捷流程图的在线版挺好用的,但是,它的导出只允许VIP会员,不是VIP会员只能导出xsd文件,而且要注册账号,极为麻烦. 在知乎看到了一位网友的评论,有一款软件和迅捷流程图一模 ...

  8. 利用 uDig 生成 GeoServer 可用的 SLD 渲染文件

    利用 uDig 生成 GeoServer 可用的 SLD 渲染文件 uDig简介 uDig是一个 open source (EPL and BSD) 桌面应用程序框架,构建在Eclipse RCP和G ...

  9. Viewpager+Fragment 跳转Activity报错android.os.TransactionTooLargeException: data parcel size xxxxx bytes

    Viewpager + Fragment 跳转Activity报错android.os.TransactionTooLargeException: data parcel size xxxxx byt ...

  10. c#串口通信并处理接收的多个参数

    最近摸索做个上位机,简单记录一下关键的几个部分 c#做串口通信主要使用的是System.IO.Ports类,其实还是十分方便的 最终效果如下: 千万不要忘记了下面这个 填写串口相关配置 我们可以通过G ...