在 Vue 中，父子元件的關係可以總結為 props down, events up。父元件通過 props 向下傳遞資料給子元件，子元件通過 events 給父元件傳送訊息。

子元件要顯式地用 props 選項宣告它期待獲得的資料。父元件像普通屬性一樣使用，可以靜態傳遞資料，也可以用v-bind來動態繫結資料，這樣父元件改變了資料，子元件也會自動更新資料。

父元件中props屬性名採用中劃線，而子元件中的props屬性名採用駝峰命名

這篇文章寫的很全面：https://www.cnblogs.com/xiaohuochai/p/7388866.html

.showMsgStyle{
    display: inline-block;
}

<div id="simple">
    <parent-component></parent-component>
</div>

var childNode = {
    template:"<div><span>Child data: </span><div class='showMsgStyle'>{{showMsg}}</div></div>",
    props:["showMsg"]
};
var parentNode = {
    template:"<div><span>Parent Data: </span><input v-model='msg' :placeholder='pHolderData'><child-component :show-msg='msg'></child-component></div>",
    data(){
        return {
            msg:"",
            pHolderData:"please input"
        }
    },
    components:{
        "child-component":childNode
    }
};
var vm = new Vue({
    el:"#simple",
    components:{
        "parent-component":parentNode
    }
});