tests: 多层次的 v-model

tests/vue/myinput.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <!-- 能保证 v-model 可以在最底层组件使用。通过将底层的事件往上传，而不是在中间层修改 -->
+    <input v-bind="$attrs" v-bind:value="value" v-on="inputListeners" />
+
+    <!-- 这个会报错: mutate props -->
+    <!-- <input v-model="value"> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "myinput",
+  props: {
+    value: {
+      type: Number,
+      default: 2333,
+    },
+  },
+  computed: {
+    inputListeners: function() {
+      var vm = this;
+      console.log(this.$listeners.input); // 从调用 <myinput @input /> 而来
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign(
+        {},
+        // We add all the listeners from the parent
+        // 不会覆盖父组件的listener。是怎么通知父组件的呢？this是谁?
+        // 比如 <myinput @focus />, <input @focus='focus' />, 被调用时，会触发？？？
+        this.$listeners,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          input: function(event) {
+            vm.$emit("input", +event.target.value);
+          },
+        }
+      );
+    },
+  },
+};
+</script>

tests/vue/useMyinput.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="margin-top: 200px;">
+    myinput: <myinput v-model="val" @focus="myfocus" />
+    <div>{{ val }}</div>
+    parent: <input v-model="val" />
+  </div>
+</template>
+
+<script>
+import myinput from "./myinput";
+export default {
+  name: "useMyinput",
+  data() {
+    return {
+      val: 3,
+    };
+  },
+  methods: {
+    myfocus(e) {
+      // console.log(this.val);
+      console.log(e);
+    },
+  },
+  components: {
+    myinput,
+  },
+};
+</script>