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的值。