vue 官方解释 v-model 本质

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
   <input type="text" :value="message" @input="message = $event.target.value">
   <span>{{message}}</span>
</div>
<script>
   var app2 = new Vue({
        el:'#app',
         data:{
             message:"Hello Vue"
         }
   });
</script>

自定义组件实现 v-model(原生和 element 都可实现)

子组件

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
  <div>
    <!--1 el-下拉选择框 -->
    <!-- <el-select v-model="content" @change="handleChange" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      >
      </el-option>
    </el-select> -->

    <!--2 原生下拉框 -->
    <select name="" id="" v-model="content" @change="handleChange">
      <option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.label }}
      </option>
    </select>

    <!--3 el-输入框 -->
    <!-- <el-input
      v-model="content"
      @input="handleChange"
      placeholder="请输入内容"
    ></el-input> -->

    <!--4 原生输入框 -->
    <!-- <input v-model="content" @input="handleChange" /> -->
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    newValue: {
      type: String,
      default: "",
    },
  },
  model: {
    event: "change",
    props: "newValue",
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
          disabled: true,
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      content: this.newValue,
    };
  },
  methods: {
    handleChange() {
      this.$emit("change", this.content);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

父组件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div><child v-model="option" /> {{ option }}</div>
</template>

<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  data() {
    return {
      option: "选项一",
    };
  },
};
</script>

<style lang="less" scoped>
</style>