Vue.js 动态道具

例子

正如您能够将数据从视图绑定到模型一样，您也可以使用相同的 v-bind 指令绑定道具，以将信息从父组件传递到子组件。

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