常用的组件通信方式:6种
- props
- 适用于的场景:父子组件通信
- 注意事项:
- 如果父组件给子组件传递数据(函数):本质就是子组件给父组件传递数据
- 如果父组件给子组件传递数据(数据):本质就是父组件给子组件传递数据
- 书写方式:3种小提示:路由的props
- 例如:[‘todo’],{type:Array},{type:Array,default:[ ]}
- 书写方式:布尔值,对象,函数形式
- 自定义事件
- 适用于的场景:子给父传递数据
- 使用方式:$on与$emit
- 全局事件总线
- 适用于场景:万能
- 使用方式:Vue.prototype.$bus = this
- 消息订阅与发布(pubsub)
- 适用于场景:万能
- React框架中使用比较多
- Vuex
- 适用于场景:万能
- 插槽
- 适用于场景:父子组件通信 —-(传递的一般是结构)
- 分类:默认插槽、具名插槽、作用域插槽
- v-model
- 实现原理:value与input事件实现的,而且还需要注意可以通过v-model实现父子组件数据同步
- sync属性修饰符
- 实现原理:
- :money.sync,代表父组件给子组件传递props[money]
- 给当前子组件绑定一个自定义事件(update:money)
- 实现原理:
- $attrs与$listeners
- 使用方式:v-bind=”$attrs” v-on=”$listeners”
- 他们两个都是组件实例的属性,可以获取到父组件给子组件传递的props与自定义事件
- $children与$parent
- 通过ref可以获取到某一个组件
- $children组件实例的属性,可以获取到当前组建的全部子组件,为一个【数组】,通过forEach遍历。
- $parent组件实例属性,可以获取到当前子组件的父组件,进而可以操作父组件的数据与方法
原文地址:http://www.cnblogs.com/songyajie32C/p/16814388.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性