这是一个创建于 1367 天前的主题，其中的信息可能已经有所发展或是发生改变。
我遇到的情景是这样的：
一个 div 元素，就叫它 A 了。它内部有一个 card 组件（即对应一个被引进来并声明在 components 里的 .vue 文件），在页面上大概是一张卡片的样式。
除此之外，在 A 中还有一个 button 元素，就叫它按钮了。上面那个卡片可以理解为有正反两面，按钮只有在卡片为反面时可用，正面时要 disable=true 。
鼠标在那张卡片上点击，此时卡片组件内部有一个 isFront 变为 false，于是反面，即 `v-if=!isFront` 的内容出现，正面，即 `v-if=isFront` 的内容消失，A 中的按钮可用。再在那张卡片上点击，卡片的正面内容出现，反面内容消失，按钮不可用。
但同时，当按钮可用时，要求按下按钮，卡片由反面变为正面，且按钮随之不可用。
就是这里这个按下按钮的事件，不知道有什么办法通知给子组件吗？
我现在的用法是用一个数值类型的变量 buttonClicked 作为 props 传递到子组件内部，子组件内部 watch 这个 props，按钮按下这个 buttonClicked 就 ++，也相当于通知到了事件。但是感觉这个实现很不优雅，不知道有没有更好的办法。
谢谢
一个 div 元素，就叫它 A 了。它内部有一个 card 组件（即对应一个被引进来并声明在 components 里的 .vue 文件），在页面上大概是一张卡片的样式。
除此之外，在 A 中还有一个 button 元素，就叫它按钮了。上面那个卡片可以理解为有正反两面，按钮只有在卡片为反面时可用，正面时要 disable=true 。
鼠标在那张卡片上点击，此时卡片组件内部有一个 isFront 变为 false，于是反面，即 `v-if=!isFront` 的内容出现，正面，即 `v-if=isFront` 的内容消失，A 中的按钮可用。再在那张卡片上点击，卡片的正面内容出现，反面内容消失，按钮不可用。
但同时，当按钮可用时，要求按下按钮，卡片由反面变为正面，且按钮随之不可用。
就是这里这个按下按钮的事件，不知道有什么办法通知给子组件吗？
我现在的用法是用一个数值类型的变量 buttonClicked 作为 props 传递到子组件内部，子组件内部 watch 这个 props，按钮按下这个 buttonClicked 就 ++，也相当于通知到了事件。但是感觉这个实现很不优雅，不知道有没有更好的办法。
谢谢
第 1 条附言 · 2021-03-30 16:42:16 +08:00
 |
1
codder 2021-03-30 15:31:54 +08:00
父组件传值给子组件用 props，子组件传值给服组件用 emit，好好看看官方的文档里面都有的！
|
 |
2
murmur 2021-03-30 15:34:57 +08:00  1
父组件不是可以直接 ref 调用子组件的方法，用得到事件么
|
 |
3
Laz 2021-03-30 15:36:56 +08:00
多看文档😹
|
 |
4
falcon05 2021-03-30 15:36:57 +08:00
我也是 watch props 。。。
|
 |
5
DL9412 2021-03-30 15:43:05 +08:00 1
参考 vue 官网风格指南，https://cn.vuejs.org/v2/style-guide/#隐性的父子组件通信谨慎使用
原文： 应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或变更 prop 。 一个理想的 Vue 应用是 prop 向下传递，事件向上传递的。遵循这一约定会让你的组件更易于理解。 |
 |
6
renmu123 2021-03-30 15:46:33 +08:00 via Android
在 A 中定义 isfront 然后通过 prop 传递给 card 组件?
|
 |
7
Newyorkcity OP |
 |
8
Shook 2021-03-30 15:51:07 +08:00 1
给卡片绑定 ref
<card ref="card" /> 给按钮绑定 flip()方法 <button @click="flip">Flip</button> 在 flip()方法中，调用 card 组件内方法 this.$refs.card.onClick(); 在 card 组件的 onClick()方法中，切换 isFront 点击 card 组件时，调用的也是这个方法 this.isFront = !this.isFront; |
|
9
codder 2021-03-30 16:01:01 +08:00 1
给你写了个简单的例子，你自己研究研究吧！蓝奏域名 /iFLCmnh4khg 密码:6fxx
|
|
10
codder 2021-03-30 16:01:29 +08:00 1
@codder 蓝奏域名: wws.lanzous.com
|
Select Language