vue父子组件传值以及通讯

1.子组件的使用

1.编写子组件
2.在需要使用的父组件中通过import引入
3.在vue的components中注册
4.在模板中使用

子组件向父组件传值

//子组件 bar.vue



// 父组件 foo.vue

2.父子组件间通信

父组件向子组件传递数据
只需要在父组件通过v-bind传入一个值，在子组件中，通过props接收，即可完成数据的传递，示例:

// 父组件 foo.vue



// 子组件bar.vue

子组件和父组件通信可以通过this.$emit将方法和数据传递给父组件。

父组件调用子组件的方法

vue会给子组件添加一个ref属性，通过this.$refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法，例如：

//子组件


//父组件
this.$ref.bar.子组件的方法