vue3 父组件通过v-model给子组件传参

之前用的父组件给子组件传参.是父组件通过给子组件上绑定属性的方式传参.vue3 支持可以使用 v-model:attr="data"的方式给子组件传参.

定义父组件

<template>
  <div class="container">
    <child v-model:num="num"></child>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import child from "./12-child.vue"
let num = ref(20)
</script>

<style scoped></style>

定义子组件

<template>
    <div class="container">
        子组件{{ num }}
        <button @click="dbclick">点击</button>
    </div>
</template>

<script setup lang="ts">
//ts 建议里面传对象 
const props = defineProps({
    num: {
        type: Number,
        default: 50
    }
})
//如何修改父组件中的传来的参数 不建议子组件直接修改父组件中的值
const emit = defineEmits<{
    (event: 'update:num',n:number): void
}>()
let n = props.num;
const dbclick = () => {
    n++;
    emit('update:num', n)
}

</script>

<style scoped></style>

子组件给父组件传参的时候 . 父组件中不需要定义方法,让子组件通过emit触发.而是固定写法.defineEmit()的时候 ,(event:‘update:xxx’,data:any) 的方式传参.