rep create pla eve 16px markup div ont
父组件数据如何传递给子组件呢?可以通过 props 属性来实现
父组件:
- <parent>:child-msg="msg">>//这里必须要用 - 代替驼峰
- </parent>data(){return {
- msg:[1,2,3]
- };
- }
子组件通过 props 来接收数据: 方式 1:
- props:['childMsg']
方式 2 :
- props:{childMsg:Array//这样可以指定传入的类型,如果类型不对,会警告}
方式 3:
- props: {
- childMsg: {
- type: Array,
- default:
- [0, 0, 0] //这样可以指定默认的值
- }
- }
这样呢,就实现了父组件向子组件传递数据.
那么,如果子组件想要改变数据呢?这在 vue 中是不允许的,因为 vue 只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.
- 子组件:
- div @click="up"></div>
- methods: {
- up() {this.$emit('upup','hehe');//主动触发upup方法,'hehe'为向父组件传递的数据}
- }
父组件:
- <div><child@upup="change" :msg="msg"></child>//监听子组件触发的upup事件,然后调用change方法
- </div>
- methods: { change(msg) {
- this.msg = msg;
- }
- }
如果 2 个组件不是父子组件那么如何通信呢?这时可以通过 eventHub 来实现通信. 所谓 eventHub 就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.
- let Hub = new Vue(); //创建事件中心
组件 1 触发:
- <div@click="eve">methods: {eve() {Hub.$emit('change','hehe');//Hub触发事件}
- }
组件 2 接收:
- created() { Hub.$on('change', () => {//Hub接收事件
- this.msg ='hehe';
- });
- }
这样就实现了非父子组件之间的通信了. 原理就是把 Hub 当作一个中转站!
vue2.0 父子组件以及非父子组件如何通信
来源: http://www.bubuko.com/infodetail-2135686.html