vue 兄弟组件之间传值,和父子组件之间传值。

从一知半解,再到另一种一知半解,前端就是这么神奇的历程,所以不要怕没有搞不定的事儿,多想想总会栽到坑里再爬起来不就完了的事。所以啊,千万别给自己设上限。
**

父子组件传值的精髓: 子组件通过this.emit(‘相同事件名’) 父组件通过v-on:相同事件名=“写的事件名” 通信。

**

通过父组件 v-bind =“传递的值” 子组件 prop{‘传递的值’} 进行通信

vue中兄弟之间传值的实例
父组件: main.vue
子组件:Brother.vue
子组件:OtherBrother.vue

需求,当我选择子组件Brother.vue中表格的一行值后,把id传给子组件OtherBrother.vue,从而渲染这个id绑定的数据。
第一步:选择标记后点击下一步
vue 兄弟组件之间传值,和父子组件之间传值。
第二步:出现OtherBrother.vue的数据。
vue 兄弟组件之间传值,和父子组件之间传值。
首先子组件Brother.vue中,拿到id后传给父组件main.vue

vue 兄弟组件之间传值,和父子组件之间传值。methods里面:
vue 兄弟组件之间传值,和父子组件之间传值。
记得一定要把id传出去。
然后父组件main.vue

vue 兄弟组件之间传值,和父子组件之间传值。
红框的部分是Brother.vue和main.vue之间的父子组件传值。
然后获取到了id值,接下来,就把获取到的id值传给OtherBrother.vue
vue 兄弟组件之间传值,和父子组件之间传值。
篮筐的部分是main.vue和OtherBrother.vue之间进行数据传递。
在OtherBrother.vue中用prop,把父组件的值下放过来。
vue 兄弟组件之间传值,和父子组件之间传值。
vue 兄弟组件之间传值,和父子组件之间传值。
在watch里面监听id 的变化 注keyWord=id