Vue2

使用

image.png

vue2中，我們通過以下方式實現(xiàn)雙向綁定：

<template>
  <div class="test">
    <input v-model="name">
    {{name}}
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      name: 'yn',
    }
  }
}
</script>

雙向綁定單個值

image.png

CustomInput組件：

<template>
  <input type="text" :value="value" @input = "inputChange">
</template>

<script>
export default {
  name: "CustomInput",
  props: ['value'],
  methods: {
    inputChange(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

Test組件:

<template>
  <div class="test">
<!--    <input type="text" v-model="name">-->
<!--    {{name}}-->
<!--    <br/>-->
    <span>自定義組件：</span>
    <CustomInput v-model="age"/>  <!--此處v-model相當(dāng)于:value="age" @input="changeAge"-->
    <!--    <CustomInput :value="age" @input="changeAge"/>-->
    {{age}}
  </div>
</template>

<script>
import CustomInput from "./CustomInput";

export default {
  name: "Test",
  components: {
    CustomInput,
  },
  data() {
    return {
      // name: 'yn',
      age: 20,
    }
  },
  methods: {
    changeAge(value) {
      this.age = Number(value);
    }
  }
}
</script>

• 在vue2中，v-model相當(dāng)于用value傳遞了綁定值，用@input事件接收了子組件通過$emit傳遞的參數(shù)。

雙向綁定多個值

CustomInput組件：

<template>
  <div>
    <input :value="value"
           @input = "inputChange">
    <input :value="name"
           @input = "inputNameChange">
  </div>
</template>

<script>
export default {
  name: "CustomInput",
  props: ['value', 'name'],
  methods: {
    inputChange(e) {
      this.$emit('input', e.target.value)
    },
    inputNameChange(e) {
      this.$emit('update:name', e.target.value);
    }
  }
}
</script>

Test組件：

<template>
  <div class="test">
<!--    <input type="text" v-model="name">-->
<!--    {{name}}-->
<!--    <br/>-->
    <span>自定義組件：</span>
    <CustomInput v-model="age" :name.sync="name"/> <!--此處v-model相當(dāng)于:value="age" @input="age=$event"-->
  </div>
</template>

<script>
import CustomInput from "./CustomInput";

export default {
  name: "Test",
  components: {
    CustomInput,
  },
  data() {
    return {
      name: 'yn',
      age: 20,
    }
  },
  methods: {
    // changeAge(value) {
    //   this.age = Number(value);
    // }
  }
}
</script>

Vue3

雙向綁定單個值

CustomInput組件：

<template>
  <div class='CustomInput'>
    <input :value="modelValue"
           @input = "inputChange">
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    modelValue: String,
  },
  setup(props, {emit}) {
    function inputChange(e) {
      emit('update:modelValue', e.target.value)
    };
    return {
      inputChange,
    }
  }
};
</script>

Test組件：

<template>
  <div class='test'>
  <CustomInput v-model="name"/>
    {{name}}
  </div>
</template>

<script>
import CustomInput from './CustomInput';
import { defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'test',
  components: {
    CustomInput
  },
  setup() {
    const name = ref('yn');
    return {
      name,
    }
  }
});
</script>

雙向綁定多個值

CustomInput組件：

<template>
  <div class='CustomInput'>
    <input :value="age"
           @input = "inputChange">
    <input :value="name"
           @input = "inputNameChange">
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    name: String,
    age: Number,
  },
  setup(props, {emit}) {
    function inputChange(e) {
      emit('update:age', e.target.value)
    };
    function inputNameChange(e) {
      emit('update:name', e.target.value);
    }
    return {
      inputChange,
      inputNameChange,
    }
  }
};
</script>

Test組件：

<template>
  <div class='test'>
  <CustomInput v-model:name="name" v-model:age="age"/>
    {{name}} {{age}}
  </div>
</template>

<script>
import CustomInput from './CustomInput';
import { defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'test',
  components: {
    CustomInput
  },
  setup() {
    const name = ref('yn');
    const age = ref(20);
    return {
      name,
      age,
    }
  }
});