组件的数据传递从外往里

组件数据传递：

1） 父组件通过 v-bind绑定数据
<father :message="data"></father>

2） 子组件通过 props声明期待接收的数据
props: ['message']

备注： 当属性名 是 - 形式 ， props里面，需要写成驼峰
<!-- vue.min.js -->
<script src="./js/vue.min.js"></script>
<!-- dom -->
<div id="app">
    <!-- 使用局部组件 -->
    <my-component :out-msg="msg" message="我是来自外部死数字"></my-component>
   
</div>

<script>
    // 局部组件
    new Vue({
        el: '#app',
        data: {
            msg: '我是外部数据'
        },
        components: {   
            // 定义局部组件 
            'my-component': {   
                props: ["outMsg", "message"],   // 期望接收的外部数据
                data () {             // 组件内部数
                    return {
                        selfMsg: '组件自己的数据'
                    }
                },
                template: `<div>
                                我是局部组件 <br />
                                自己的数据： {{this.selfMsg}} <br>
                                外部的数据:  {{outMsg}} <br>
                                外部死数据： {{message}}
                            </div>`
            }
        }
    })
    
</script>