Vue 组件中 v-mode 的本质以及实现方式

# 1、v-model 本质

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。其实本质上，v-model 是 v-bind 以及 v-on 配合使用的语法糖，例如在 vue 中：

<input v-model="value" />
<!-- 就是相当于 -->
<input :value="value" @input="value=$event.target.value " />

1
2
3

# 2、不用 v-model 使用正常父子通信

<!-- parent -->
<template>
  <div class="parent">
    <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
    <Child @returnBack="turnBack" :give="sthGiveChild"></Child>
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  },
  methods: {
    turnBack(val) {
      this.sthGiveChild = val;
    }
  }
}
</script>
<!-- child -->
<template>
<div class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
  props: {
    give: String
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。

# 3、使用 v-model 时

<!-- parent -->
<template>
<div class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child v-model="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  }
}
</script>
<!-- child -->
<template>
<div class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
  props: {
    give: String
  },
  model: {
    prop: 'give',
    event: 'returnBack'
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

其实默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。上边的子组件等价于以下内容。

<!-- child -->
<template>
  <div class="child">
    <p>我是儿子，父亲对我说： {{value}}</p>
    <a href="javascript:;" @click="returnBackFn">回应</a>
  </div>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '还你200块');
    }
  }
}
</script>

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

# 4、核心代码内容

model: {
    prop: 'someProp', //自定义的动态值，默认为：value。
    event: 'someEvent' //自定义事件名，与下面的$emit事件对应，默认input。
}
this.$emit('someEvent', [returnValueToParent])

1
2
3
4
5

#Vue

上次更新: 2024/01/30, 00:35:17

← vue 强制刷新组件 vue 组件中的.native 原生事件（@click.native）→