例項
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
如果需要修改某個父元件傳過去的值，可以通過在子元件中重新設定一個變數來接受父元件傳過來的引數，然後在子元件中設定一個函式用來修改新建變數的值。