关于 Vue 组件的通信问题

Question

官方文档说子组件通过发射事件向父组件传递消息，但是我发现如果父组件通过 prop 向子组件传递父组件的方法，然后由子组件调用这个方法也是可行的：

//parent.vue
<parent>
  <child :foo="foo"><child>
</parent>

//child.vue
<button @click="foo">调用<button>

我想问这种做法有什么缺陷？
新人接触 Vue 不久，对 Vue 框架和前端工程化都不大懂，希望能举个例子详细说明

Answer 1

这样不利于子组建的复用。子组件对父组件产生了依赖。更好的方式是子组件触发一个事件 父组件去捕获然后执行相关逻辑