Vue3.2+TS的组件间的v-model传值-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3.2+TS的组件间的v-model传值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

组件之间的v-model，为什么可以v-model，大家可以去看看v-model的原理，然后就会发现这个方法一目了然。

父组件

<template>
  <div>
    <Child v-model:num="num"></Child>
    <!--下面就相当于上面 -->
    <Child :num="num" @update:num='num=$event'></Child>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Child from './views/child.vue'
let num = ref(10)

</script>
<style scoped lang="less">
</style>

子组件

<template>
  <div>
    <h1>app传过来的数据为{{num}}</h1>
    <button @click="send">子传父</button>
  </div>
</template>

<script setup lang="ts">
defineProps({
  num:{
    type:Number,
    default:100
  }
})
const emit = defineEmits<{
  //event必须写成update:num
  (event:'update:num',childnum:number):void
}>()

const send = ()=>{
  emit('update:num',50)
}

</script>
<style scoped lang="less">
</style>

假如子组件需要按照某个方法变化，那么可以自己定义，比如需要自增加50

<template>
  <div>
    <h1>app传过来的数据为{{num}}</h1>
    <button @click="send">子传父</button>
  </div>
</template>

<script setup lang="ts">
let props = defineProps({
  num:{
    type:Number,
    default:100
  }
})

const emit = defineEmits<{
  (event:'update:num',childnum:number):void
}>()

// 不要直接修改父组件传过来的值
// 建议赋值给其他变量后再修改
let nchange = props.num
const send = ()=>{
  nchange+=50
  emit('update:num',nchange)
}

</script>
<style scoped lang="less">
</style>