vue2.0如何来实现的父子组件以及兄弟组件之间的传值

1.子组件使用父组件的值或数据

结构如图:

做为父组件的index.vue


vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第1张图片
vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第2张图片

做为子组件在父组件当中使用的组件one和two


vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第3张图片
vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第4张图片

2.父组件使用子组件当中的数据或者值

父组件index.vue

vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第5张图片
vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第6张图片

为父组件供值的同时也做为父组件中子组件的组件three


vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第7张图片

3.兄弟组件之间的传值,three和four两个非父子组件之间的传值


vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第8张图片
vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第9张图片

兄弟组件之间数据的传递如果不使用vuex的话,那么可以使用bus来传值,所以在这里在需要互相通信的兄弟组件之间引入了Bus(一个js);

Bus.js


整个项目的框架结构


vue2.0如何来实现的父子组件以及兄弟组件之间的传值_第10张图片

你可能感兴趣的:(vue2.0如何来实现的父子组件以及兄弟组件之间的传值)