vue中父向子传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>

<script src="../vue.js"></script>
<script>
    Vue.component('VBtn', {
        data() {
            return {}
        },
        template: `<button>
            {{ id }}  //用

        </button>`,
//第一步声明  
        props: ['id']
    })

    let Vheader = {
        data() {
            return {}
        },
        //只要声明了父组件的属性，就可以使用
        props: ['msg', 'post'],
        template: `
            <div class="child">
                <h2>日天</h2>
                <h2>{{ msg22 }}</h2>
                <h3>{{ post.title}}</h3>
                <VBtn v-bind:id = 'post.id'></VBtn>
            </div>
        `
    }

    let App = {
        data() {
            return {
                text: "我是父组件的数据",
                post: {
                    id: 1,
                    title: 'My Journey with Vue'
                }
            }
        },
        template:
                `
          <div id="a">
          <!--//动态传值-->
          <!--// <Vheader msg = '111' ></Vheader>   静态传值-->
　　　　　　　　//第三步
           <Vheader :msg = 'text' v-bind:post = 'post'></Vheader>

            </div>
          `,
        components: {
            Vheader
        }
    }
    new Vue({
        el: "#app",
        data() {
            return {
                msg: 'lvxing',
            }

        },
        template: `<App />`,

        components: {
            App
        }
    })

</script>
</body>
</html>