web-frontend

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

VueJSで子のコンポネントの状態を変更する
Feb. 2, 2020, 1:51 p.m.

目次

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

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

サンプルコード

子コンポネント

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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>

親コンポネント

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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>