之前用的父组件给子组件传参.是父组件通过给子组件上绑定属性的方式传参.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) 的方式传参.