组件数据传递父传子

<!-- vue.min.js -->
<script src="./js/vue.min.js"></script>
<!-- dom -->
<div id="app">
    <!-- 使用父组件 -->
    <father :out-msg="msg"></father>
</div>

<script>
  
    // 局部组件
    new Vue({
        el: '#app',
        data: {
            msg: "我是外部数据"
        },
        components: {    // 注册局部组件
            // 定义父组件
            'father': {
                props: ["outMsg"], // 接收外部数据
                data () {   // 父组件自己的数据
                    return {
                        fatherSelfData: "父组件自己的数据"
                    }
                },
                // 父组件的模板 在父组件模板 使用子组件
                template: `<div>
                                我是父组件, <br />
                                我自己的数据： {{this.fatherSelfData}} <br />
                                我从外部接收的数据: {{outMsg}}  <br />
                                我有一个儿子：
                                <son :out-msg="outMsg"></son>
                            </div>`,
                // 父组件的注册组件选项
                components: {
                    'son': {  // 子组件
                        props: ["outMsg"],
                        data () {
                            return {
                                sonData: "我是子组件自己的数据"
                            }
                        },
                        template: `<div>
                                        <hr />
                                        我是子组件 <br />
                                        自己的数据: {{this.sonData}} <br />
                                        来自父组件的数据: {{outMsg}}
                                    </div>`
                    }
                }
            }
        }
    })
    
</script>