vue中组件通信
2024-09-01 03:43:14
组件的通信
1. 父子组件通信
案例:
//父子组件通信思路
// 1 将父组件的数据传给子组件 在子组件上自定义单项数据绑定
// 2 子组件用props 接受自定义的那个:号属性
Vue.component('father',{
template:'#father',
data(){//组件中一个data数据必须是一个函数
return {
money:1000
}
}
})
Vue.component('son',{
template:'#son',
props:['hello']
//props:['money']
// props:{//数据验证
// 'monery':Number
// }
})
子父组件通信
//定义组件
Vue.component('father',{
template:'#father',
data(){
return {//用来接受子组件给的数据
shou:0
}
},
methods:{//在父组件中定义事件处理程序方法 然后将父组件的方法已自定义的形式绑定在子组件身上 son
fn(da){//接受子组件参数
this.shou=da
}
}
})
Vue.component('son',{
template:'#son',
data(){//先子组件的数据
return {
money:5000
}
},
methods:{
givehongbao(){
this.$emit('give',this.money)
//通过this.$emit 发送两个参数 参数1 自定义的那个方法名give 参数2子组件传的数据 money
}
}
})
最新文章
- 2000条你应知的WPF小姿势 基础篇<15-21>
- 用orb-slam2跑RGB-D Example中的TUM Dataset
- JAVA学习博客---2015-7
- spring bean中scope="prototype“的作用
- Quartz 框架的应用
- 记录一个php强制下载文件函数
- bash color
- Heap Sorting 总结 （C++）
- socketWriter.go
- 关于弹性布局的 flex-grow的用法和flex-shrink的用法
- 【Mybatis】1、Mybatis拦截器学习资料汇总
- kotlin - 空安全
- linux vnc 安装
- 用Java操作数据库Datetime数据
- 从0开始学习 GITHUB 系列之「GIT 进阶」【转】
- 解决MySQL新建用户后无法登录问题
- 关于数组中加入相同的view的试验
- C++语言基础(4)-构造函数和析构函数
- C++string类整理
- [转]10分钟梳理MySQL知识点：揭秘亿级高并发数据库调优与最佳实践法则