vue-vmodel-native.html

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Components Example</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app" class="demo">
      <basic-input @focus.native="onFocus"></basic-input>
    </div>
    <script>
      Vue.component("basic-input", {
        inheritAttrs: false,
        props: ["label", "value"],
        template: `<label>
  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
</label>`,
        computed: {
          inputListeners: function () {
            var vm = this;
            console.log(this.$listeners);
            // `Object.assign` 将所有的对象合并为一个新对象
            return Object.assign(
              {},
              // 我们从父级添加所有的监听器
              this.$listeners,
              // 然后我们添加自定义监听器，
              // 或覆写一些监听器的行为
              {
                // 这里确保组件配合 `v-model` 的工作
                input: function (event) {
                  vm.$emit("input", event.target.value);
                },
              }
            );
          },
        },
        mounted: function () {},
      });
      const data = {
        lovingVue: false,
      };
      new Vue({
        el: "#app",
        data,
        computed: {},
        methods: {
          onFocus: function () {
            console.log("我被 focus 了");
          },
        },
        mounted() {},
      });
    </script>
  </body>
</html>