Vue组件传值-父传子（一）(使用prop)

以下内容纯属个人理解，旨在记录和分享。

值传递-父传子

实现父组件向子组件的值传递。

在父组件（即使用子组件的组件）中，使用子组件并向其中传递一个静态字符串值（不变的固定的即为静态）。

 子组件中使用prop来接受父组件传递的值：

        在子组件中，访问 'title' 这个值，如同访问data中定义的值一样，这意味着不需要另外在data中定义一个变量来接受这个值，而可以直接使用，如 'this.title'（需要明白的是，在<script>中使用this.title来使用，而在模板中则不需要，是直接使用）；

备注：

1）prop大小写问题

prop指的就是props中的一个项，在父组件中：

则在子组件中：

html中对于大小写不敏感，这意味着父组件中如果不使用’post-title‘，而使用’postTitle‘，那么html会自动将其转为小写，即posttitle，则在子组件中使用’postTitle‘无法准确获取到值，因此父组件html中的kebab-case命名对应着自组件中的驼峰命名camelCase。或者可以都直接使用小写。

2）prop的类型

以上以字符串数组的形式

以上以对象的形式

不过，以对象的形式不仅写出了prop的名称，还指定了类型，健壮性更好。如’字符串的"123"和数字123‘的区分

3）传递动态值

前面提到皆是传递一个具体的不变的静态的值，在此结合使用’v-bind‘来传递动态值，

如父组件中调用子组件处，使用v-bind与父组件内的一个具体变量值绑定，当父组件中的这个变量值发生变化时，新值会传入子组件中；值的类型是多样的，如String、Number、Boolean、Array、Object以及’callBack:Function‘皆能够支持。

4）单向数据流

简单说即为，通过prop，数据只能通过父组件传递到子组件，数据更新时也是父组件来主动进行更新，而不能子组件向父组件传递值。并且这意味着，在子组件中只能对这个prop进行使用，而不能更改其值。这称之为’父子 prop 之间形成了一个“单向下行绑定”。

如果需要在子组件中对prop进行更改，则可以采用如下形式：

将其值赋值给data中心定义的一个变量counter，通过改变counter来达到改变prop的目的。

如上所述，在这种方式下，组件之间的值传递,只能是父传子，而不能子传父。

其中原因，这种限制了数据单向传递的方式，防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解，因为一个父组件中可能不止用到一个子组件。