在组件中通过Props进行数据传递

如果我们正在构建一个博客,我们可能需要一个表示博客文章的组件。我们希望所有的博客文章分享相同的视觉布局,但有不同的内容。要实现这样的效果自然必须向组件中传递数据,例如每篇文章标题和内容,这就会使用到 props。

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

defineProps数据传递

但是这个值不能在组件的script中直接修改,需要把defineProps给一个变量然后再用用数组的方式修改


defineProps中使用对象

使用对象来约束传过来的值不会是用对象设立以外的值

还可以用对象给defineProps的对象来设置默认值

主页面信息

组件页面信息

defineProps循环遍历数组

也可以把他们放入数组中用循环来遍历

1.在组件页面defineprops中的对象用对象赋值

2.在主页面中用v-for循环数组,把item放入对象中

猜你喜欢

转载自blog.csdn.net/ming_xiang/article/details/141955283