一、定义属性

有时候我们定义一个组件后，需要让调用者传入参数，那么就可以将参数定义成属性。示例代码如下：

1. Person组件代码：

<script setup name="Person">
// Person组件
import {defineProps} from "vue";

// 1. 使用数组的形式
//const props = defineProps(['username'])
// 2. 使用对象的形式
const props = defineProps({
    gender: {
        type: String,
        default: '男'
    },
    username: String,
    age: Number,
    body: {
        height: Number,
        weight: Number
    }
})

</script>

<template>
<p>
    用户名：{{ props.username }}，
    年龄：{{ props.age }}，
    身高：{{ props.body.height }}，
    体重：{{ props.body.weight }}
</p>
</template>

1. App.vue组件代码：

<script setup>
import Person from "./components/Person.vue"
</script>

<template>
<Person :age="18" username="张三" :body="{height: 180, weight: 140}"></Person>
</template>

子组件不能修改父组件传过来的props ，否则会引起错误。

二、自定义事件

子组件可以自定义事件，然后父组件可以实现发生这个事件的处理函数。示例代码如下：

1. Person.vue组件：

<script setup name="Person">
import {defineEmits, ref} from "vue";

let steps = ref(0);

const emit = defineEmits(['change']);

const onUpdate = () => {
    steps.value += 10
    emit('change', steps.value);
}

</script>

<template>
<button @click="onUpdate">行走10步</button>
</template>

1. App.vue组件：

<script setup>
import Person from "./components/Person.vue"

const onPersonChange = (steps) => {
    console.log("步行了：", steps);
}
</script>

<template>
<Person @change="onPersonChange"></Person>
</template>

三、定义v-model

使用v-model 可以定义一个在父组件和子组件中双向绑定的对象。示例代码如下：

1. Person.vue组件代码：

<script setup name="Person">
import {defineModel, watch} from "vue";

let steps = defineModel();
const onUpdate = () => {
    steps.value += 10;
}
watch(steps, (newValue, oldValue) => {
    console.log("Person中监听到steps：", newValue);
})

</script>

<template>
<button @click="onUpdate">行走10步</button>
</template>

1. App.vue组件代码：