vue的自定義組件使用v-model

在父組件中, 給children組件定義一個saySomeThing:

<template>
<div class="home">
  <p>{{saySomeThing}}</p>
  <Children v-model="saySomeThing" />
</div>
</template>

<script>
import Children from '@/components/Children.vue'

export default {
  name: 'Home',
  components: {
    Children
  },
  data() {
    return {
      saySomeThing: 'saySomeThing'
    }
  }
}
</script>

在子組件中，更改saySomeThing的值：

<template>
<div class="hello">
  <button type="button" name="button" @click='toParent'>點擊迴應</button>
</div>
</template>

<script>
export default {
  name: 'parent',
  props: {
    saySomeThing: String
  },
  methods: {
    toParent() {
      this.$emit('input', '哈哈哈哈哈哈')
    }
  }
}
</script>

<style scoped lang="scss">
</style>

在子組件中主要是通過this.$emit('input', '哈哈哈哈哈哈') 來更改saySomeThing的值。