vue-cli工程下组件之间的通信
来源:互联网 发布:淘宝天猫内部优惠券 编辑:程序博客网 时间:2024/05/29 03:52
vue组件之间的通信包括三种:
1.父组件向子组件通信
2.子组件向父组件通信
3.同级组件之间的通信
首先,看一下vue-cli工程的部分目录:
说明一下:App.vue是父组件,ZiZuJianOne.vue和ZiZuJianTwo.vue是子组件,两个子组件是在父组件App.vue里注册的。
①父组件App.vue如何向子组件ZiZuJianOne.vue通信的
父组件App.vue的代码:
子组件ZiZuJianOne.vue的代码:
解释:
①在父组件的<zi-zu-jian-one>标签里加上msgfromfather 属性,当然,这个属性是我们自己定义的,里面给它赋上一个值,上面这个案例是一个字符串I am App.vue;
②然后在子组件里要想获得这个自定义属性的值,首先,在子组件里加上选项props,然后在模板中通过{{ XXX }}使用。
②子组件ZiZuJianOne.vue如何向父组件App.vue通信的
子组件ZiZuJianOne.vue的代码:
父组件App.vue的代码:
解释:
①在父组件的<zi-zu-jian-one>标签里使用v-on自定义绑定一个child-tell-me事件,然后给这个事件添加listenToSon方法,那么,怎么触发这个child-tell-me事件,从而让它调用呢listenToSon方法呢?通过this.$emit('事件名称','传入参数')来触发;
②上面这个案例,我在子组件通过点击按钮来触发这个事件,然后还把子组件里面的sonWord数据传递过去,父组件里面的listenToSon方法就会被执行,然后我把传递过来的sonWord赋值给父组件里面的childWord,从而达到通信的效果。
③同级组件的通信:子组件ZiZuJianOne.vue和子组件ZiZuJianTwo.vue之间的通信
要点:建立一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线。
方法:新建一个js文件,命名为event.js。
event.js的代码:
子组件ZiZuJianOne.vue的代码:
子组件ZiZuJianTwo.vue的代码:
解释:
①在两个组件中均引入:import bus from '../assets/event.js';
②使用bus.$emit('事件名称','传入参数'),作为发送消息的那一方;
③使用bus.$on('事件名称','回调函数'),作为接收消息的那一方。
end!
- vue-cli工程下组件之间的通信
- vue组件之间的通信
- vue组件之间的通信
- VUE组件之间的通信
- vue组件之间的通信
- vue组件之间的多种通信方法
- vue组件之间的多种通信方法
- Vue兄弟组件之间的通信(EventBus)
- vue父子组件之间的通信
- 总结vue父子组件之间的通信
- 关于Vue父子组件之间的通信
- vue 同级组件之间的通信
- vue.js组件与组件之间的通信
- Vue 父组件与子组件之间的通信
- vue-router和vue-cli以及组件之间的传值
- vue组件之间的通信(数据的传递)
- Vue项目实战(四)- 组件之间的通信
- vue开发:vue父子组件与非父子组件之间的通信
- hihoCoder #1032 : 最长回文子串
- python 列表,元组,字典,set(5)
- CDH5.9.0离线部署
- 安装Redis后RedisDesktopManager无法连接
- gensim函数库的Word2Vec的参数说明
- vue-cli工程下组件之间的通信
- 有关重载和覆写的说明
- 编程缩写字典
- 练习1-3
- 聚集索引和非聚集索引(整理)
- RecyclerView配合DiffUtil
- centos 6.7 yum install mysql
- HDU 2752 kmp next的应用
- 怎么利用Spring利用注解读取配置文件里的数据