vue自定义组件v-model

vue 自定义组件 v-model

  • 本质上，v-model 是 v-bind 以及 v-on 配合使用的语法糖
  • 允许一个自定义组件在使用 v-model 时定制 prop 和 event。
  • 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event
1
2
3
4
5
model: {
  prop: 'someProp', // 注意，是prop，不带s。
  event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 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>
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
<!-- child -->
<template>
  <div class="child">
    <p>我是儿子，父亲对我说： {{ give }}</p>
    <a href="javascript:;" rel="external nofollow" @click="returnBackFn"
      >回应</a
    >
  </div>
</template>
<script>
export default {
  props: {
    give: String,
  },
  model: {
    prop: "give",
    event: "returnBack",
  },
  methods: {
    returnBackFn() {
      this.$emit("returnBack", "还你200块");
    },
  },
};
</script>