props配置

实例
App.vue文件

<script setup>
import Student from './components/Student.vue'
import {ref} from 'vue'
let address=ref('上海')
</script>
<template>
    <div>
        <Student name='刘备'  sex='男' :address="address"/>
    </div>
</template>

Student.vue子组件

<script setup>
import {ref,defineProps, toRefs} from 'vue'
const props=defineProps({
    name:{
        type:String,//name的类型是字符串
        required:true,//name是必要的
    },
    age:{
        type:Number,
        default:99,//默如果不传值，则默认99
    },
    sex:String,
    address:String
})
let msg=ref('欢迎来到三国')
let myAddress=ref('')
const {name,age,sex,address}=toRefs(props)
const changeAge=()=>{
    address.value=666
}
myAddress.value=address.value
const changeAddress=()=>{
    myAddress.value='南京'
}
</script>
<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age+2}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生地址：{{myAddress}}</h2>
        <button @click="changeAddress">修改地址</button>
    </div>
</template>

静态传参：只需要name='章三'
动态传参：需要通过v-bind绑定，:address='address',此处address为表达式，会自动解析address代表的某个值
特例：传入age时，子组件中配置age为数值型，所以需要通过v-bind绑定age
如果需要修改某个父组件传过去的值，可以通过在子组件中重新设置一个变量来接受父组件传过来的参数，然后在子组件中设置一个函数用来修改新建变量的值。