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

1.创建组件

1.了解我们组件基本知识

我们在一些软件或者页面的时候会发现我们跳转布局的时候，只有固定的区域发送了变化，我们的一些其他区域没有变化，这个是因为我们现在都是前后端分离的，不可以给每一个页面都创建出相同的功能栏，所以我们的页面和软件的布局就像官方文档里面的示例一样。

我们可以新创建一个项目来了解我们的组件。如果说你有多个项目的话可以关闭你那些暂时不需要的项目，只需要右击显示我们的项目然后选中我们的额关闭项目即可。

我们在新创建的项目里面创建一个名为components 因为这个是官方给我们的存放组件的目录。

创建好了之后右击这个目录会发现我们原本是新建页面的位置改为了新建组件，这个是正确的名字才会出现，没用的话就是名字错误了。

2.创建和调用组件

我们创建好了组件目录之后创建两个组件，分别查看我们的效果。

创建好了之后我们分别给我们的两个主键导入一张图片或文字，然后在我们的主页调用。

我们调用主键可以直接打出我们的组件名即可调用，保存之后运行我们的页面。

这个就是我们的组件的基本了解和创建并调用了。

2.通过我们的Props进行数据传递

1.了解props及其基础用法

我们可以给我们的组件赋予一些css属性就像是我们平时游览的页面一样，就是一些国定不变的区域就是我们的组件，我们在给组件设置css样式时需要设置一个scoped属性来确保我们设置的css属性不会污染其他组件。

保存好了之后可以查看我们的效果。

我们可以使用同一个组件多次调用多次。

我们可以依靠我们定义两个传递值来实现我们的文字内容。

我们也可以使用活值来上传我们的内容，上传我们的变量值的时候需要将我们的传递的值名字改为我们的：username这个名字是我们的定义的传递名，并不是确定的名字。

保存好之后到页面查看我们的效果，可以发现是一样的并没有出现什么错误。

我们也可以改变我们的图片位置，这个就是我们的另一个传递值avater了，将我们的图片地址给到我们的avater传递过去，然后将我们的图片地址属性改为：src:"avater"即可实现

我们同时也可以对我们的传递值进行改变，直接改变我们的传递值是会发生错误的，所以我们先要将我们的传递值改为变量，同时调用我们的computed来实现我们的改变传递值。

这个就是我们的传递数据的基本原理了。

2.Props的校验和循环遍历数组对象

我们在传递值的时候不一定确定我们传递的值就是我们需要的值，这个时候我们可以给我们的Props添加一个验证来确保我们传递过去的值就是我们需要的值。

1.了解我们的Props效验和基本用法

我们先在官网了解我们的props的校验的基本知识和用法：Props | Vue.js (vuejs.org)

然后我们在上面的这个项目里面再次修改一下改为有校验的传递。

在页面中我们可以看的显示出了我们的123，是因为我们没有使用v-bind所以还是字符串类型，我们使用v-bind或者它的简写" ：" 都可以将其转化成为对应的类型。

当我们在username的前面添加好了我们的" ："之后会发现它开始提示我们报错了，这就表名了我们的传递验证开始起到作用了。

2.设置我们的默认值

我们不一定会在那里接受到值，所以我们也可以自己设置一个默认值。

3.传递对象的认知和用法

我们不仅可以传递单个的值，也可以传递我们的对象。在传递我们的对象之前需要再次对我们的Props进行改变和我们调用数组里面的属性值的改变。

运行之后效果是我们设置的值那么就是正确的。

我们也可以对我们的数组进行设置默认值，来确保我们没有值传递时，可以不是一片空白。

4.使用v-for遍历循环赋值

我们如果有多个数组数据时，我们不可能每一个都创建我们的组件并调用我们的数组，这个时候就可以使用我们的v-for来进行赋值了。

以上就是我们的Props的基本用法了。