未分類
1 4 月 2021

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

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

資深大佬 : Newyorkcity 0

我遇到的情景是这样的：

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

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

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

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

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

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

谢谢

大佬有話說 (10)

  • 資深大佬 : 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