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

1.创建组件

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

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

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

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

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

2.创建和调用组件

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

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

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

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

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

1.了解props及其基础用法

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

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

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

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

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

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

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

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

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