Vue.js解析(十)【Vue组件间通信】
来源:互联网 发布:js插件编写 编辑:程序博客网 时间:2024/05/16 03:00
什么是Vue组件?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
Vue组件间通信
父组件向子组件通信
方法一:props
使用props,父组件可以使用props向子组件传递数据。
父组件vue模板father.vue
<template> <child :msg="message"></child></template><script>import child from './child.vue';export default { components: { child }, data () { return { message: 'father message'; } }}</script>
子组件vue模板child.vue
<template> <div>{{msg}}</div></template><script>export default { props: { msg: { type: String, required: true } }}</script>
方法二 使用$children
使用$children可以在父组件中访问子组件。
子组件向父组件通信
方法一:使用vue事件
父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。
父组件vue模板father.vue
<template> <child @msgFunc="func"></child></template><script>import child from './child.vue';export default { components: { child }, methods: { func (msg) { console.log(msg); } }}</script>
子组件vue模板child.vue
<template> <button @click="handleClick">点我</button></template><script>export default { props: { msg: { type: String, required: true } }, methods () { handleClick () { //........ this.$emit('msgFunc'); } }}</script>
方法二: 通过修改父组件传递的props来修改父组件数据
这种方法只能在父组件传递一个引用变量时可以使用,字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址,所以修改了子组件中props的数据即修改了父组件的数据。
但是并不推荐这么做,并不建议直接修改props的值,如果数据是用于显示修改的,在实际开发中我经常会将其放入data中,在需要回传给父组件的时候再用事件回传数据。这样做保持了组件独立以及解耦,不会因为使用同一份数据而导致数据流异常混乱,只通过特定的接口传递数据来达到修改数据的目的,而内部数据状态由专门的data负责管理。
方法三:使用$parent
使用$parent可以访问父组件的数据。
非父子组件、兄弟组件之间的数据传递
非父子组件通信,Vue官方推荐使用一个Vue实例作为中央事件总线。
Vue内部有一个事件机制,可以参考源码。
$on方法用来监听一个事件。
$emit用来触发一个事件。
/*新建一个Vue实例作为中央事件总嫌*/let event = new Vue();/*监听事件*/event.$on('eventName', (val) => { //......do something});/*触发事件*/event.$emit('eventName', 'this is a message.');
多层级父子组件通信:
在Vue1.0中实现了
之前在学习饿了么的开源组件库element的时候发现他们重新实现了broadcast以及dispatch的方法,以mixin的方式引入,具体可以参考《说说element组件库broadcast与dispatch》。但是跟Vue1.0的两个方法实现有略微的不同。这两个方法实现了向子孙组件事件广播以及向多层级父组件事件派发的功能。但是并非广义上的事件广播,它需要指定一个commentName进行向指定组件名组件定向广播(派发)事件。
其实这两个方法内部实现还是用到的还是
复杂的单页应用数据管理
当应用足够复杂情况下,请使用vuex进行数据管理。
- Vue.js解析(十)【Vue组件间通信】
- Vue组件间通信
- vue组件间通信
- vue组件间通信
- Vue组件间通信
- 父子组件通信vue.js
- Vue.js 组件和组件通信
- vue的组件间通信
- Vue组件间的通信
- Vue 组件间通信实例
- Vue组件间通信方式
- 【Vue.js】-Vue.js组件
- 聊聊Vue.js组件间通信的几种姿势
- Vue.js 组件间通信的几种姿势
- vue.js父子组件通信动态绑定
- vue组件及组件间通信
- Vue 父子组件、组件间通信
- vue.js 父子间通信
- Spark学习笔记(转)
- python练习题3 孟德尔遗传定律 统计子代基因型为显性的概率
- 《JAVA与模式》之策略模式
- HDU:2014 青年歌手大奖赛_评委会打分
- LightOJ 1030 Discovering Gold【概率dp】
- Vue.js解析(十)【Vue组件间通信】
- Mysql 安装
- hdu1671trie
- git命令
- Linode修改内核装锐速
- Javascript知识点总结(四)
- 文章标题
- 4.7(1)——输出九九乘法表
- 制作html5游戏2