#NGパターン
###親
<template>
<div>
<Children :message="message" />
</div>
</template>
<script>
import Children from '~/components/Children.vue'
export default {
components: {
Children,
},
data() {
return {
message: 'メッセージ',
}
},
}
</script>
###子
Children.vue
<template>
<div>
<input type="text" v-model="message" />
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
},
},
}
</script>
上記の事をしたいが、どうしても以下エラーが出る...
Avoid mutating a prop directly since the value will
be overwritten whenever the parent component re-renders.
Instead, use a data or computed property based on
the prop's value. Prop being mutated: "message"
...
propsの値を直接変更しないでね、って言ってます
OKパターン
###親
<template>
<div>
<Children :message.sync="message" />
</div>
</template>
<script>
import Children from '~/components/Children.vue'
export default {
components: {
Children,
},
data() {
return {
message: 'メッセージ',
}
},
}
</script>
- 親で.syncを使う
###子
Children.vue
<template>
<div>
<input type="text" :value="message" @input="inputMessage" />
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
},
},
methods: {
inputMessage(e) {
this.$emit('update:message', e.target.value)
},
},
}
</script>
- 子では、v-modelは使用せず、inputイベントでupdate:props名
これで親と子のmessageが同期されて更新できます
知らなかったけど、めっちゃ便利