<!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>