使用Vue.js 3 Composition API,在组件显示时触发一个事件
P粉032900484
2023-08-28 23:40:07
<p>我在我的应用程序中有一些组件,通过按钮和变量来显示/隐藏,例如v-show="variable",按钮只是将这些变量设置为true/false,我将这些组件处理为网页,就像在不同页面上浏览网站一样。我想要的是在组件显示在页面上时调用一个函数的方法。比如,我要随机选择2个玩家开始一场比赛,当游戏的棋盘显示出来时,只有当玩家是2时,才会出现一条消息或者弹出一个警告,重要的是事件发生在那个实例中,而不是之前。我的想法是在组件的脚本部分有一个函数:</p>
<pre class="brush:php;toolbar:false;">function something() { alert("hello"); }</pre>
<p>然后找到一种方法来说:</p>
<pre class="brush:php;toolbar:false;">当组件显示时 -> if (player == 2) { something(); }</pre>
<p>我缺乏的是如何确定和处理"当组件显示时"这一部分。对我来说,最合适的逻辑似乎是使用onMounted、onRendered(我读到它只在开发环境下工作)和onActivated,但它们似乎不能正常工作/根本不工作。</p>
我找到了一种方法。问题是:它与
onMounted
和v-if
结合使用。我正在检查代码,看看是否可以使用v-if
而不是v-show
,我记得我故意选择使用v-show
来处理我的组件,但也许在这种情况下改变一下不会有问题。