实例
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
如果需要修改某个父组件传过去的值,可以通过在子组件中重新设置一个变量来接受父组件传过来的参数,然后在子组件中设置一个函数用来修改新建变量的值。