【Vue3练习】Vue3使用v-model以及多个v-model

注意事项：Vue3里面v-model对应的事件名称不能随便取了，必选是update:后面接对象的绑定值（父组件传入的值）

父组件：

<script setup >
import { ref} from 'vue';
import MyInput from "./components/cz-input.vue";
const valueOne = ref(100);
const valueTwo = ref(200);

</script>
<template>
  <div>v-model
    <div class="fa">父组件value--{
  {valueOne}}
      <!-- 多个v-model在冒号后面接需要绑定的值，冒号后面的值需要同子组件的props值名称对应 -->
        <MyInput v-model="valueOne" @update:modelValue="change" v-model:modelValueTwo="valueTwo"></MyInput>
    </div>
    
  </div>
</template>

子组件：

<script setup >
import { ref} from "vue";
let props = defineProps({"modelValue":Number,"modelValueTwo":Number});
const $emit = defineEmits(["update:modelValue","update:modelValueTwo"]);
const changeValue = (e) => {
  $emit("update:modelValue",props.modelValue+1);
  $emit("update:modelValueTwo",props.modelValueTwo+1);
};

</script>
<template>
  <div>
    子组件valueOne---{
  { modelValue }}
    子组件valueTwo---{
  { modelValueTwo }}
    <el-button type="primary" @click="changeValue">变化</el-button>
  </div>
</template>