【知らなかった】Vue.js Nuxt.js 親からpropsで渡した値を子から更新する方法

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が同期されて更新できます

知らなかったけど、めっちゃ便利