VUE学习之-------props

在 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
    }
});