Vue.jsのハマりどころ
3650 ワード
概要
- 2年くらいVueで開発してるけど、いまだにハマるポイントを書いた
- これから、Vueの開発をする or している人の参考になればと思います!
propsされた値をv-modelに渡したい
- 親から渡されたデータを子コンポーネントにv-modelで渡したい時
- ついつい、v-modelでそのまま渡したくなるが、禁物
- v-modelは、直接データを書き換えてしまう!
- computedするパターンが多い
- computedは
get
set
の両方を書ける
export default {
props: {
hoge: {
type: String,
required: true
}
},
computed: {
hogeHoge: {
get() {
return this.hoge
},
set(value) {
this.$emit('input', value)
}
}
}
}
- また、上記コンポーネントを呼び出す際は以下のようにする
-
v-model="hoge"
は以下のコードと同義のsyntax suger
-
:value="hoge"
@input="hoge=value"
親コンポーネント
<template>
<clild-component v-model="hoge" />
</template>
// 上記と同義
<template>
<child-component :value="hoge" @input="hoge=value">
</template>
コンポーネントを再表示するとデータが消える or 不要なデータが残る
-
v-if
などで表示を切り替えする際に、よく起きる
- メモリ上にDOMが残っていることが原因
- 一見、データが消えたように見えても、メモリ上では保持している
- たいていの場合、
created
内で、propsされた値をDataに移し替えていることが多い
解決策として
- propsされた値はコンポーネント中では持たず、
computed
で保持する
-
emit
で更新する!
- Vuexを使う
- ついつい、v-modelでそのまま渡したくなるが、禁物
- v-modelは、直接データを書き換えてしまう!
- computedは
get
set
の両方を書ける
export default {
props: {
hoge: {
type: String,
required: true
}
},
computed: {
hogeHoge: {
get() {
return this.hoge
},
set(value) {
this.$emit('input', value)
}
}
}
}
-
v-model="hoge"
は以下のコードと同義のsyntax suger
-
:value="hoge"
@input="hoge=value"
-
親コンポーネント
<template>
<clild-component v-model="hoge" />
</template>
// 上記と同義
<template>
<child-component :value="hoge" @input="hoge=value">
</template>
-
v-if
などで表示を切り替えする際に、よく起きる - メモリ上にDOMが残っていることが原因
- 一見、データが消えたように見えても、メモリ上では保持している
- たいていの場合、
created
内で、propsされた値をDataに移し替えていることが多い
解決策として
- propsされた値はコンポーネント中では持たず、
computed
で保持する-
emit
で更新する!
-
- Vuexを使う
Author And Source
この問題について(Vue.jsのハマりどころ), 我々は、より多くの情報をここで見つけました https://qiita.com/nuno929/items/a43364c33f903b78f2df著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .