前端Vue（六）——Vue组件的作用、全局组件与局部组件、Props的静态数据与动态数据的传递、单向数据流

前端Vue（六）

Vue组件

一、组件作用

作用：用来减少Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据不同业务将页面划分多个不同的组件，然后由多个组件去完成去完成整个页面的布局，便于使用Vue进行开发页面管理，方便开发人员维护。

二、组件注册

1、全局组件注册

通过component对象来注册：
参数一：组件名称。
参数二：组件配置对象 template：用来书写组件的html代码（在template中必须存在一个容器，必须有且仅有一个根元素）。

全局组件注册给Vue实例，日后可以在任意Vue实例的范围内使用该组件。

举个例子：

可以看到，template里面是有个div容器包裹的，如果只有template，没有div这个容器，会出错。

2、全局组件使用

直接通过组件的名字来使用。

使用时需要在Vue作用范围内根据组件名使用全局组件。

注意：这一块有个命名的地方需要注意，有时候使用驼峰命名，比如组件注册的时候使用：userLogin，但是在使用组件的时候，不能 userLogin，这样会报错，只能 user-login 这样使用。

3、局部组件注册

说明：通过将组件注册给对应Vue实例中一个components属性来完成组件注册，这种方式不会对Vue实例造成累加。

接着来看下怎么局部组件注册：

但这么写不太好，如果日后代码量越来越多，不好。

所以使用下面这种方式：

4、第二种开发方式

还有另外一种使用组件的方式，但都差不多：

主要是通过 id选择器 来使用。

三、Props的使用

作用：props用来给组件传递相应静态数据或者是动态数据的。

1、静态数据

组件外与组件内怎么传递与接收数据呢？
通过 props 来传递。

总结：
1、使用组件时可以在组件上定义多个属性以及对应数据。
2、在组件内部可以使用props数组声明多个定义在组件上的属性名，日后可以在组件中通过 {{ 属性名 }} 方式获取组件中属性值。

2、动态数据

上面都是通过写死的方式来传递静态数据，现在来通过声明动态数据传递给组件内部。

让 v-bind : name （ : name）的方式绑定属性，通过这种方式来动态的传递数据。

日后可以通过Vue实例中的 username 发生变化，从而动态的发生变化。

来看下传递顺序：

所以这里只要Vue实例中的 data 里面的数据发生变化，就可以动态的使其数据发生变化。

3、单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

现在先注册一个组件：

在使用这个组件的时候，我们不希望这个数据传过来，希望组件内部自己就有数据，组件内部它自己可以定义数据吗，当然是可以的：

在组件内部可以自己定义一个 data，然后里面通过 return 的方式来定义自己的数据。

那这跟单项数据流有什么关系呢？
如果我们在外部传入数据，内部又定义自己的数据：

此时就会报错！
子元素想要修改传入的父元素数据，就会报错！

来看下官网说明：

但是可以取不同的名字来分别使用外部数据与内部数据：

这里可以看到：
外部数据通过 props 来传递，内部数据自己调用 return 方法来使用！

但是如果我们就是想要保留外部传入的数据怎么办呢？

可以在 return 方法里面，通过将外部数据赋予内部数据（上述例子的 name : this.username），就可以保留。