[Nuxt.js] ボタンが押されたときにCSSを付与したい

Question

やろうとしていること

① components/Button.vueにあるボタンが押される
② components/Counter.vueにある要素にCSSクラスを付与
③ 要素でCSS AnimationをNoloopで一度だけ発火

簡単に言うと、コンポーネント①のボタンを押したらコンポーネント②でアニメーションが起きるようにしたいです。
どちらのコンポーネントも同じindex.vueに読み込まれています。

困っていること

同じコンポーネントでCSSクラスを付与する方法は見つけることができたものの、
コンポーネント間でデータのやり取りをするにはstoreを使用する必要があると思うのですが、
シンプルなサンプルコードが見当たらず、どのように行えばいいのか分かりません。

どなたかお詳しい方、お知恵をお貸し頂けますと幸いです。

Answer 1

ソースコードがないので何とも言えませんが、仮に

<template>
  <Button />
  <Counter />
</template>

のような構成で、
Counterコンポーネント内に目的のクラスを付与するメッソドaddAnimation()みたいなのがあるとすると、
ベースとなるテンプレート内では

<template>
  <Button />
  <Counter ref="counter" />
</template>

のように書き、
Button.vueの中の適当なボタンで
<button @click="$parent.$refs.counter.addAnimation">発火</button>
みたいにするとできないでしょうか？

$parentで親コンポーネントにアクセスできます。そして$refs.[ref="hogehoge"みたいに付けた名前]で子コンポーネントにアクセスでき、データを見たりメソッドを使ったりできます。
もっとスマートだったり安全だったりな方法があるのかもしれませんが、とりあえず意図した動きはできると思います！

Comments

[nztm]

なるほど、親コンポーネントにアクセスした後、refの先が参照できるということでしたか。実装することができました。ありがとうございます！