在组件中通过Props来传递数据

简单来说就是想在几个一样的模块里分享相同的视觉布局,但是想有不一样的内容展示(就是有不一样的地方,差异化),然后就需要向组件中传递数据,这样就会使用到props

Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给博客文章组件一个标题，我们必须在组件的 props 列表上声明它。这里要用到 defineProps 宏：

组件一般父子级关系,就是父级里面嵌套了几个子组件,比如我们这个,index就是父级,而UserInfo就是子组件,所以可以在父级里展示多个子组件

涉及到数据分配的话,一般都是父级向子级分配。先在子组件定义一个defineProps属性,里面放定义的属性(函数名),把子组件定义的属性(函数名)传过来,而后在父级这边定义输出显示的值即可,可以传多个属性名

记得加双引号和冒号,不然无法输出响应状态的值

传图片属性也是类似的,先在父级那边把属性名拿过来,再把图片路径写好,最后在子组件那边src前面加冒号把属性名写上去即可

如果想要打印处理的话,只需要在defineProps方法前面加上const props=即可,这样就可以直接把值打印出来,如果只想要一个的话直接在props后面加上属性名即可

不能对传过来的数据直接进行修改,因为它是只读的,会报错

想修改的话就使用计算属性,先把computed导入进来,然后定义一个常量,使用computed加拼接的方式修改,比如加一个@符号,可以看见文字后面都带有一个@符号,证明你修改成功啦