Vue.js props方法给子组件传递数据要怎么做？

二话不说，先贴上代码

<div id="props">
    <child msg="hello Vue js"></child>
</div>

<script>
    Vue.component({
        props:{
            msg:this.msg  //获取数据
        },
        template:"<span>{{msg}}</span>"
    });
    var props=new Vue({
        el:"#props"
    });
    //这样的话算是将父组件的数据传递给子组件吗？
    //因为我是将msg数据写在<child></child>上，所以我觉得不算是将父组件的数据传递给子组件
    //所以我需要将msg数据写在 id="props"的div上才算吧？
</script>

那么问题又来了，请看以下代码.

<div id="model">
    <parent msg="这是存在父组件上的数据"></parent>
</div>
<script>
    var child=Vue.extend({
        template:"<div>这是子组件的模版</div>"  //创建一个子组件
        //此处我如果想要在这个子组件中使用父组件上存的msg数据，应该要怎么办？
        /*
            自己试了些方法都报错了，希望大神们可以给讲讲
        */
    });
    var parent=Vue.extend({
        template:"<div>这是父组件的模版<child></child></div>",
        components:{
            'child':child   //将子组件注册到父组件这边
        }
    });
    var model=new Vue({
       el:"#model",
       components:{
           'parent':parent   //在实例化vue的时候，注册父组件
       }     
    });
</script>

---

<div id="model">
    <parent msg="这是存在父组件上的数据"></parent>
</div>
<script>
    var child=Vue.extend({
        props:['msg'],
        template:"<div>这是子组件的模版</div>"  //创建一个子组件
        //此处我如果想要在这个子组件中使用父组件上存的msg数据，应该要怎么办？
        /*
            自己试了些方法都报错了，希望大神们可以给讲讲
        */
    });
    var parent=Vue.extend({
        props:['msg'],
        template:"<div>这是父组件的模版<child v-bind:msg='msg'></child></div>",
        components:{
            'child':child   //将子组件注册到父组件这边
        }
    });
    var model=new Vue({
       el:"#model",
       components:{
           'parent':parent   //在实例化vue的时候，注册父组件
       }     
    });
</script>

---

我先问两个问题：

1. 你是写的单文件组件么(就是.vue文件，配合webpack开发)？代码看着像，但模版部分缺少template标签，不确定你是故意省掉考验大家，还是新发明的组件写法

2. 怎么到处都有new Vue语句？你确定看懂下面两张图了？