Vue.jsでthis.$emit(‘update:〇〇’, ××)はタイムラグがありそう
今回はVue.jsでthis.$emit('update:〇〇’, ××)で親コンポーネントのプロパティを更新する際にタイムラグがありそうということをお話ししていきます。
Vue.jsでthis.$emit('update:〇〇’, ××)はタイムラグがありそう
Vue.jsでthis.$emit('update:〇〇’, ××)を使おうとした時です。
具体的には上記の〇〇部分の変数を初期化しようとしましたが、this.$emitで指定した親コンポーネントの変数が初期化されませんでした。
下記のようにconsole.logを差し込んで変数の中身を確かめてみても、値が更新されているようには見えません。
|
1 2 3 |
console.log(親コンポーネントの変数をpropで指定したもの) this.$emit('update:〇〇', ××) console.log(親コンポーネントの変数をpropで指定したもの) |
色々条件を変更して検証したところ、どうやらthis.$emit('update:〇〇’, ××)にはタイムラグがあるようです。
処理の最後に〇〇の変数の初期化を試したらきちんと値が初期化されることが確認できました。
this.$emit('update:〇〇’, ××)を使うときは気をつけましょう。
終わりに
今回はVue.jsでthis.$emit('update:〇〇’, ××)で親コンポーネントのプロパティを更新する際にタイムラグがありそうということをお話しいたしました。