Props
一个组件需要显式声明它所接受的 props,这样 Vue 才能知道外部传入的哪些是 props,哪些是透传 attribute
1.创建一个组件
script 中添加 defineProps 括号里写需要传递的值
2.在父类中引用并传递值
效果图
3. 想传递图片路径时为avatar赋值即可
将组件图片的地址更改成传递过来的值即可
效果图
如果直接处理传递过来的值时会报错
我们需要先进行定义在打印
并且传递过来的值也不能直接改变,应为我们传递过来的值是一个只读类型的数字需要在值后面添加时需要使用计算属性
运行结果
以上方法也有一些缺点当传递的值太多时都写在同一行太过繁琐,当子组件获得值时父类没给时,父类可能没有给值。所以需要对传递过来的值进行效验。
将username转换成Number类型在执行
当传递过来的值不是规定的的类型时会发生错误
所以我们可以给他设置一个默认值当数据类型空值时使用默认值
当传递的值是对象时
父类
子类
效果图
给传递过来的对象设定默认值
当有多个对象需要传递时使用v-for