vue 在组件上使用 v-model

2019-10-23 561 阅读1分钟

  <body>
    <div id="components-demo">
      <custom-input v-model="testText"></custom-input>
      <p>Message is: {{ testText }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
      // 在组件上使用 v-model
      Vue.component("custom-input", {
        props: ["value"],
        template: `
          <div>
            <input
            v-bind:value = "value"
            v-on:input = "$emit('input', $event.target.value)"
            >
          </div>
        `
      });
      new Vue({
        el: "#components-demo",
        data: function() {
          return {
            testText: "hello wrold"
          };
        }
      });
    </script>
    </body>