（十二）vue.js组件——进阶篇之使用props传递数据（2）

(1)为什么使用props

前面我们实现了通过组件把模板内容进行复用，这是不错的事情，但是我们却不希望在任何地方任何时候组件都是都是那样的一层不变。
我们更希望在不同的情况下，组件有不同的展现，这样它才是有趣的，更让我们喜欢的。
而要实现这个需要，就需要使用props了，他能让组件如同我们所知的js函数一样，在被使用时能够接收参数，并根据参数有不同的展现。

(2)使用props流程【数组形式】

要通过props来实现让组件如同js函数样接收参数，并根据参数有不同的展现。我们进行一下几个步骤。

1.给组件添加props选项
在自定义组件的内容配置对象里面给上一个props选项，他和template同级。如下：

Vue.component("person-message", {
props:["name","sex"],
template: `<div><h2>用户信息</h2> 姓名：{
  {name}},性别：{
  {sex}}</div>`,
});

注意
1.这个props选项的值为一个对象或者数组，有点类似于js函数的形参，规定了这个组件能够接收那些参数。
2.然后这里要注意下：对于组件传参采取的是对象传参，即传入的参数的名称要和props里面给定的名称一致，否则无法接收到任何参数。

2.在调用组件时传入实际参数即可
你在调用组件的标签上，按照标签属性的写法即可传入参数到组件中。
当然，就和上面所说一样，我们传递的参数名称（属性名）应该包含在组件的props选项中的数组或者对象中。否则组件无法接收你的值。

<div id="app">
<person-message name="张三" sex="男"></person-message>
</div>

3.完整代码及效果

<div id="app">
<person-message name="张三" sex="男"></person-message>
<person-message name="李四" sex="女"></person