1 组件上使用 v-model
v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。
外界数据的变化会自动同步到 counter 组件中
counter 组件中数据的变化，也会自动同步到外界
2 在组件上使用 v-model 的步骤
① 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件
② 子组件中，通过 props 接收父组件传递过来的数据
① 在 v-bind: 指令之前添加 v-model 指令
② 在子组件中声明 emits 自定义事件，格式为 update:xxx
③ 调用 $emit() 触发自定义事件，更新父组件中的数据
2.1 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件
<template> <div> <h1>App 组件</h1> <p>App-count: {{count}}</p> <counter :count="count"></counter> </div> </template> <script> import Counter from './Counter.vue' export default { name: 'App', data() { return { count: 0 } }, components: { Counter } } </script> <style> </style>
2.2 子组件中，通过 props 接收父组件传递过来的数据
<template> <div> <h3>Counter 组件</h3> <p>{{count}}</p> </div> </template> <script> export default { name: 'Counter', props: ['count'] } </script> <style> </style>
2.3 在 v-bind: 指令之前添加 v-model 指令
监听子组件的数据的变化。
<template> <div> <h1>App 组件</h1> <p>App-count: {{count}}</p> <counter v-model:count="count"></counter> </div> </template> <script> import Counter from './Counter.vue' export default { name: 'App', data() { return { count: 0 } }, components: { Counter } } </script> <style> </style>
2.4 在子组件中声明 emits 自定义事件，格式为 update:xxx
利用 emits 向父组件传值。
<template> <div> <h3>Counter 组件</h3> <p>{{count}}</p> <button @click="sub"> -1 </button> </div> </template> <script> export default { name: 'Counter', props: ['count'], emits: ['update:count'] } } </script> <style> </style>
2.5 调用 $emit() 触发自定义事件，更新父组件中的数据
<template> <div> <h3>Counter 组件</h3> <p>{{count}}</p> <button @click="sub"> -1 </button> </div> </template> <script> export default { name: 'Counter', props: ['count'], emits: ['update:count'], methods: { sub() { this.$emit( 'update:count', this.count-1 ) } } } </script> <style> </style>
2.6 完整代码
Counter.vue
<template> <div> <h3>Counter 组件</h3> <p>{{count}}</p> <button @click="sub"> -1 </button> </div> </template> <script> export default { name: 'Counter', props: ['count'], emits: ['update:count'], methods: { sub() { this.$emit( 'update:count', this.count-1 ) } } } </script> <style> </style>
App.vue
<template> <div> <h1>App 组件</h1> <p>App-count: {{count}}</p> <button @click="add"> +1 </button> <counter v-model:count="count"></counter> </div> </template> <script> import Counter from './Counter.vue' export default { name: 'App', data() { return { count: 0 } }, methods: { add() { this.count++ } }, components: { Counter } } </script> <style> </style>
