请问 vue 中父组件可以告知子组件发生了事件吗？

[Newyorkcity]

我遇到的情景是这样的：

一个 div 元素，就叫它 A 了。它内部有一个 card 组件（即对应一个被引进来并声明在 components 里的 .vue 文件），在页面上大概是一张卡片的样式。

除此之外，在 A 中还有一个 button 元素，就叫它按钮了。上面那个卡片可以理解为有正反两面，按钮只有在卡片为反面时可用，正面时要 disable=true 。

鼠标在那张卡片上点击，此时卡片组件内部有一个 isFront 变为 false，于是反面，即 `v-if=!isFront` 的内容出现，正面，即 `v-if=isFront` 的内容消失，A 中的按钮可用。再在那张卡片上点击，卡片的正面内容出现，反面内容消失，按钮不可用。

但同时，当按钮可用时，要求按下按钮，卡片由反面变为正面，且按钮随之不可用。

就是这里这个按下按钮的事件，不知道有什么办法通知给子组件吗？

我现在的用法是用一个数值类型的变量 buttonClicked 作为 props 传递到子组件内部，子组件内部 watch 这个 props，按钮按下这个 buttonClicked 就 ++，也相当于通知到了事件。但是感觉这个实现很不优雅，不知道有没有更好的办法。

谢谢

[codder]

父组件传值给子组件用 props，子组件传值给服组件用 emit，好好看看官方的文档里面都有的！

[murmur]

父组件不是可以直接 ref 调用子组件的方法，用得到事件么

[Laz]

多看文档😹

[falcon05]

我也是 watch props 。。。

[DL9412]

参考 vue 官网风格指南，https://cn.vuejs.org/v2/style-guide/#隐性的父子组件通信谨慎使用

原文：

应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或变更 prop 。
一个理想的 Vue 应用是 prop 向下传递，事件向上传递的。遵循这一约定会让你的组件更易于理解。

[renmu123]

在 A 中定义 isfront 然后通过 prop 传递给 card 组件?

[Newyorkcity]

https://cn.vuejs.org/v2/guide/components-edge-cases.html#访问子组件实例或子元素

[Shook]

给卡片绑定 ref
<card ref="card" />

给按钮绑定 flip()方法
<button @click="flip">Flip</button>

在 flip()方法中，调用 card 组件内方法
this.$refs.card.onClick();

在 card 组件的 onClick()方法中，切换 isFront
点击 card 组件时，调用的也是这个方法
this.isFront = !this.isFront;

[codder]

给你写了个简单的例子，你自己研究研究吧！蓝奏域名 /iFLCmnh4khg 密码:6fxx

[codder]

@codder 蓝奏域名: wws.lanzous.com