vue系列:sync和v-model的区别

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
  <div id="vue-sync">
    <h3>I'm sync</h3>
    <p>the input value is {{parentValue}}</p>
    <vue-sync :value.sync="value"></vue-sync>

    <!--@update:value 可以简写为 @update-->
    <!--<vue-sync :value="parentValue" @update:value="val => parentValue = val"></vue-sync>-->
  </div>

  <div id="vue-v-model">
    <h3>I'm v-model</h3>
    <p>the input value is {{value}}</p>
    <vue-model :value="value" @change="value = arguments[0]"></vue-model>
  </div>
</body>

</html>
<script>
  Vue.component('vue-sync', {
    template: '',
    props: ['input_value'],

    methods: {
      input: function () {
        this.$emit('update:value', this.$el.value)
      }
    }
  });

  Vue.component('vue-model', {
    template: '',
    props: ['input_value'],
    methods: {
      updateValue: function (val) {
        this.$emit('change', val);
      }
    }
  });



  new Vue({
    el: "#vue-sync",
    data: {
      parentValue: 1
    }
  });

  new Vue({
    el: "#vue-v-model",
    data: {
      value: 1
    }
  })
</script>

vue系列:sync和v-model的区别_第1张图片

你可能感兴趣的:(vue)