VueJSで子のコンポネントの状態を変更する

Calendar Clock iconCalendar Clock icon

vuejs

# 目次

VueJSにおいて親コンポネントから子コンポネントの状態を変更したいことがある.
例えば、親ページにおいて子ダイアログを開きたい場合などである.
この場合には ref を使用する.

子コンポネントには特別な設定は必要ない.
親コンポネントで子コンポネントを埋め込むときにアトリビュートとして、ref="hoge"としてIDを設定する.
すると、親コンポネントから子コンポネントのdataに対して、this.$refs['hoge']でアクセスすることが出来る.

# サンプルコード

# 子コンポネント

<template>
<div v-show="visible">
  <h1>I'm child.</h1>
  <button @click="visible = false">Close</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    }
  }
}
</script>

# 親コンポネント

<template>
<div>
  <button @click="onClick">Open</button>
  <child ref="child" />
</div>
</template>

<script>
import child from './child';

export default {
  components: { child },
  methods: {
    onClick() {
      this.$refs['child'].visible = true;
    }
  }
}
</script>

リモートフリーランス。ウェブサービス、スマホアプリエンジニア。
東アジアを拠点に世界を移動しながら活動してます!

お仕事のご依頼・お問い合わせはこちら

コメント