vue3 defineModel实现传多参,双向绑定

134 阅读1分钟

image.png

image.png

<script setup>
import { ref } from "vue";
import Count from "./components/Count.vue";

const age = ref(18);
const name = ref("jack");

function handleClick() {
  console.log(age.value);
  console.log(name.value);
}
</script>

<template>
  <div>
    <Count v-model:age="age" v-model:name="name" />
    <button @click="handleClick">print</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const childAgeValue = defineModel("age");
const childNameValue = defineModel("name");

function handleClick() {
  childAgeValue.value++;
  childNameValue.value = "tom";
}
</script>

<template>
  <div>
    <input type="text" v-model="childAgeValue" />
    <input type="text" v-model="childNameValue" />
    <button @click="handleClick">send</button>
  </div>
</template>