在vue2使用v-model对组件进行双向绑定

1. 默认情况

v-model=“visible” 等价于 :value=“visible” 加上 @input=“visible = $event”

所以 v-model 就是父组件向子组件传了个 value 字段的值，子组件使用 props 定义 value 字段， 就可以在子组件使用 value 读取这个值；子组件使用 $emit(‘input’,值) 就可以改变 v-model 的值
父组件

<template> <div id="app"> <Tab v-model="visible" /> </div> </template> <script> import Tab from "./components/Tab.vue" export default { name: "App", data() { return { visible: true, } }, components: { Tab }, } </script> <style></style> <script/>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

子组件

<template> <div v-show="value"> 我是子组件文字 <button @click="$emit('input', false)">关闭</button> </div> </template> <script> export default { props: { value: { type: Boolean, default: false, }, }, } </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

2. 子组件改变默认字段名与事件

父组件

<template> <div id="app"> <Tab v-model="visible" /> </div> </template> <script> import Tab from "./components/Tab.vue" export default { name: "App", data() { return { visible: true, } }, components: { Tab }, } </script> <style></style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

子组件

<template> <div v-show="show"> 我是子组件文字 <button @click="$emit('change', false)">关闭</button> </div> </template> <script> export default { model: { prop: "show", event: "change", }, props: { show: { type: Boolean, default: false, }, }, } </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

子组件定义了以下代码就回改变默认字段

model: { prop: "show", event: "change", }

• 1
• 2
• 3
• 4

此时，v-model=“visible” 等价于 :show=“visible” 加上 @change=“visible = $event”