动态道具

就像你能够将视图中的数据绑定到模型一样，你也可以使用相同的 v-bind 指令绑定 props，以便将信息从父组件传递到子组件。

JS

new Vue({
    el: '#example',
    data: {
        msg: 'hello world'
    }
});

Vue.component('child', {
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>
});

HTML

<div id="example">
    <input v-model="msg" />
    <child v-bind:my-message="msg"></child>
    <!-- Shorthand ... <child :my-message="msg"></child> -->
</div>

结果

hello world