>[success] # 使用计算属性 1. 当调用组件使`v-model`，并且想在组件内部也同样使用`v-model` 可以利用计算属性 >[danger] ##### 案例 * 父 ~~~ <template> {{ name }} <children-todo v-model="name"> </children-todo> </template> <script> import childrenTodo from './components/children-todo.vue' export default { name: 'App', components: { childrenTodo, }, data() { return { name: '父组件', } }, } </script> <style></style> ~~~ * 子 ~~~ <template> <div class="content"> <input v-model="value" /> </div> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'], computed: { value: { get() { return this.modelValue }, set(val) { this.$emit('update:modelValue', val) }, }, }, } </script> ~~~