动态Props

父/子组件传递数据是通过：props 选项。

这么理解 props 选项：由于不能在子组件模板中，直接使用父组件的数据。就需要一个类似管道一样的东西，将父组件的数据传递给子组件模板。这个管道就是 props 选项。

可以理解为：子组件需要的数据，是通过父组件组自定义标签属性用指令v-bind绑定数据得来的。

注意：html是不区分大小写的，在html需要将 驼峰命名 的写法转换成 短横线分割命名法。

下面是一个实例

<div id="prop-example-2">
    <input v-model="parentMsg">
    <br />
    <child v-bind:my-message="parentMsg"></child>
</div>
<script>
    new Vue({
        el: "#prop-example-2",
        data: {
            parentMsg: 'Message from parent'
        },
        components: {
            'child': {
                props: ['myMessage'],
                template: '<span> {{ myMessage }} </span>',
            }
        }
    })
</script>

这个例子中 v-model 实现的是双向绑定， input标签中的value值和是Vue 实例中的parentMsg的值。

在组件中通过 v-bind 绑定指令，和 prop 选项 将父组件的数据传递给子组件的模板。