Vue3 v-model的使用

简介

使用场景：1 用于表单input、textarea以及select元素上创建双向数据绑定

2 用于组件间数据的通信

一个小栗子，第一个使用场景的代码

javascript 复制代码

<template>
  <div class="box">
    <div class="intro">
      <el-input v-model="inputString" placeholder="Please input"></el-input>
    </div>
    <div class="intro">
      <div>inputvalue最新的值为 = {{ inputString }}</div>
    </div>
  </div>
</template>
<script setup>
import { watch, ref } from 'vue';

const inputString = ref("");
watch(inputString, (newValue, oldValue) => {
  console.log("inputvalue = ", newValue, "oldValue = ", oldValue);
});

</script>
<style lang="less">
.box {
  display: flex;
  flex-direction: column;

  .intro {
    margin: 15px;
    padding: 10px;
  }
}
</style>

v-model可以与一个ref值联用，当input输入框的输入内容改变时，这个ref值会实时的跟着改变

一个小栗子，第二个是用场景：

自定义一个组件A，在组件A中对el-input进行了封装，自定义组件A的代码如下：

javascript 复制代码

<template>
  <div class="box">
    <el-input type="text" v-model="inputStr" @input="inputValueChange"></el-input>
  </div>
</template>
<script setup>
/* vue3.4之后这样使用
import { defineModel } from 'vue';
const inputvalue = defineModel('inputvalue');
*/
import { ref } from 'vue';
defineProps({
  inputvalue: {
    required: true,
    default: "A component value"
  }
})
const emits = defineEmits(['update:inputvalue']);

const inputStr = ref("");

const inputValueChange = () => {
  emits('update:inputvalue',  inputStr.value);
}
</script>
<style scoped lang="less">
</style>

在父组件中使用子组件A，并与父组件中的数据进行绑定，父组件中的代码如下：

javascript 复制代码

<template>
  <div class="box">
    <div class="intro">
      <div>自定义组件与父组件间值的双向绑定:{{ aValue }}</div>
      <A v-model:inputvalue="aValue"></A>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import A from './components/index.vue';

/*
  也可以用于自定义父子组件间的值的双向绑定
*/
const aValue = ref("super base value");

</script>
<style lang="less">
.box {
  display: flex;
  flex-direction: column;

  .intro {
    margin: 15px;
    padding: 10px;
  }
}
</style>

一个小栗子，父组件与子组件之间三个值同时进行双向绑定

创建一个子组件B，代码如下：

javascript 复制代码

<template>
  <div class="intro">
    <div class="btn" @click="oneEvent">change oneVal</div>
    <div class="btn" @click="twoEvent">change twoVal</div>
    <div class="btn" @click="threeEvent">change threeVal</div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const props= defineProps({
  oneVal: {
    required: true,
    default: ""
  },
  twoVal: {
    required: false,
    default: ""
  },
  threeVal: {
    required: false,
    default: ""
  }
});
const emits = defineEmits(['update:oneVal', 'update:twoVal', 'update:threeVal']);
let numOne = 0;
let numTwo = 0;
let numThree = 0;
/* 
  在点击事件中改变三个与父组件双向绑定的值
*/
const oneEvent = () => {
  numOne = numOne + 2;
  let val = numOne + '';
  console.log("val = ", val);
  emits('update:oneVal', val);
};

const twoEvent = () => {
  numTwo = numTwo + 2;
  let val = numTwo + '';
  console.log("val = ", val);
  emits('update:twoVal', val);
};

const threeEvent = () => {
  numThree = numThree + 2;
  let val = numThree + '';
  console.log("val = ", val);
  emits('update:threeVal', val);
};
</script>
<style lang="less" scoped>
.intro {
  display: flex;
  flex-direction: row;
  margin: 15px;
  padding: 10px;

  .btn {
    margin-right: 150px;
    margin-left: 75px;
    background-color: aquamarine;
    padding: 20px;
  }
}
</style>

父组件中使用这个自定义组件，并与自定义组件进行三个值的双向绑定：

javascript 复制代码

<template>
  <div class="box">
    <div class="intro">
      <B v-model:oneVal="oneVal" v-model:twoVal="twoVal" v-model:threeVal="threeVal"></B>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import B from './components/b.vue';

const oneVal = ref("父组件初值：oneVal");
const twoVal = ref("父组件初值：twoVal");
const threeVal = ref("父组件初值：threeVal");
</script>
<style lang="less">
.box {
  display: flex;
  flex-direction: column;

  .intro {
    margin: 15px;
    padding: 10px;
  }
}
</style>