vue的父子兄弟组件传递

之前学习过vue但是跟着视频学习并没有敲代码,感觉一知半解,这里做一个总结,方便自己理解以及以后工作的开展

首先关于父子组件的传递

1.父传子

父传子(其实就是父组件用v-bind给子组件绑定数据,子组件用props接收)要注意的几个点:
1.在父组件中要包含有子组件的存在
2.在父组件部分包含的子组件需要使用v-bind来绑定上数据(否则在子组件部分值就会undefined)
3.在子组件的部分使用props来进行接收
源代码如下:
父组件:
vue的父子兄弟组件传递
子组件:
vue的父子兄弟组件传递
运行效果:
vue的父子兄弟组件传递

2.子传父

关于子传父(子组件需要设置一个触发事件来传递参数,通过emit1.this.emit的方式,父组件在子标签上监听函数,来获取值),需要注意的几点: 1.触发函数中 this.emit(‘乱想的名字’,‘真实参数’);
2.在父组件中的子标签中监听该函数,需要设置函数实现
源代码:
子组件:
vue的父子兄弟组件传递
父组件:

vue的父子兄弟组件传递
运行结果:
vue的父子兄弟组件传递

然后关于兄弟组件的传递