父子间的通信,以及ref
2024-09-01 16:21:47
<!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>
最新文章
- Haskell 函数式编程快速入门【草】
- NodeOS操作系统
- 网页Email抓取 java
- jquery实现div遮罩层
- Codeforces7C 扩展欧几里得
- [收藏] 关于解决“进程com.android.phone意外停止”的方法 (未尝试)
- 用户交互与while循环<代码>
- 安卓ROOT后禁用/隐藏导航栏/虚拟按键
- 引擎设计跟踪(九.14.2d) [翻译] shader的跨平台方案之2014
- python练习程序（c100经典例20）
- gradle编译出错：Execution failed for task &#39;:app:compileTestDebugJava&#39;.
- 【腾讯Bugly干货分享】手游热更新方案xLua开源：Unity3D下Lua编程解决方案
- HDU -2670 Girl Love Value
- Android发展简报
- html基础知识1（基本标签）2017-03-07
- DNA序列对齐问题
- VC++读取图像RGB值
- 七、OpenStack—dashboard组件安装
- js将时间戳转换为日期类型
- Python中文问题