Vue组件复用+父子组件传值

1、组件复用

创建两个vue文件index.vue、model.vue。

model.vue代码：

index.vue代码：

在index.vue中引入了组件Model。

效果展示：

2、父子组件传值

在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

2.1、父组件向子组件传值

index.vue代码：

model.vue代码：

效果展示：

2.2、子组件向父组件传值

index.vue代码：

model.vue代码：

效果展示：

3、父组件调用子组件方法
index.vue代码：

model.vue代码：