Vue3 v-model的使用

简介        

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

                  2 用于组件间数据的通信

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

  
    
      
    
    
      inputvalue最新的值为 = {{ inputString }}
    
  


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


.box {
  display: flex;
  flex-direction: column;
  .intro {
    margin: 15px;
    padding: 10px;
  }
}

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

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

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

  
    
  


/* 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);
}

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

  
    
      自定义组件与父组件间值的双向绑定:{{ aValue }}
      
    
  


import { ref } from 'vue';
import A from './components/index.vue';
/*
  也可以用于自定义父子组件间的值的双向绑定
*/
const aValue = ref("super base value");


.box {
  display: flex;
  flex-direction: column;
  .intro {
    margin: 15px;
    padding: 10px;
  }
}

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

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

  
    change oneVal
    change twoVal
    change threeVal
  


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);
};


.intro {
  display: flex;
  flex-direction: row;
  margin: 15px;
  padding: 10px;
  .btn {
    margin-right: 150px;
    margin-left: 75px;
    background-color: aquamarine;
    padding: 20px;
  }
}

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

  
    
      
    
  


import { ref } from 'vue';
import B from './components/b.vue';
const oneVal = ref("父组件初值：oneVal");
const twoVal = ref("父组件初值：twoVal");
const threeVal = ref("父组件初值：threeVal");


.box {
  display: flex;
  flex-direction: column;
  .intro {
    margin: 15px;
    padding: 10px;
  }
}