動態道具

就像你能夠將檢視中的資料繫結到模型一樣，你也可以使用相同的 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