這里是針對于vue1.0，如果要學2.0，建議大家去看官方文檔

vue2.0 http://vuefe.cn/guide/

vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html

第一種

<div id="example">  <my-component></my-component></div><script src="../node_modules/vue/dist/vue.js"></script><script>  //向子組件傳遞數據  //省略extend方法，vue內部調用  Vue.component('my-component', {    //模板里不支持駝峰的屬性寫法，需要轉換為‘-'連接的屬性寫法    data:function(){      return{        parentMsg: '雨歇微涼'      }    },    template: '<div>'        +'<input v-model="parentMsg">'        +'<br>'        +'<child-component :my-message="parentMsg"></child-component>'        +'</div>',    components: {      'child-component': {        props: ['myMessage'],        template: '<div>{{myMessage}}</div>'      }    }  });  // 創建根實例1  new Vue({    el: '#example'  });</script>

有什么疑惑的，也可以去查官網的文檔，prop傳值，這里也可以直接拷去試，如果你有什么更好的簡介，還希望能夠拿出來分享。

第二種

<div id="example">  <my-component></my-component></div><script src="../node_modules/vue/dist/vue.js"></script><script>  //向子組件傳遞數據  //省略extend方法，vue內部調用  Vue.component('my-component', {    data:function(){      return {        name:'xiaoming',        age:20      }    },    //模板里不支持駝峰的屬性寫法，需要轉換為‘-'連接的屬性寫法    template: '<div >{{name}}Parent</div><child1-component v-bind:msg-name="name"></child1-component>',    components: {      'child1-component': {        // 聲明 props        props: ['msgName'],        template: '<div>A child-111111 component!{{msgName}}</div>'      }    }  });  // 創建根實例1  new Vue({    el: '#example'  });</script>

第三種

<div id="example">  <my-component></my-component></div><script src="../node_modules/vue/dist/vue.js"></script><script>  //向子組件傳遞數據  //省略extend方法，vue內部調用  Vue.component('my-component', {    data:function(){      return {        name:'xiaoming',        age:20      }    },    //模板里不支持駝峰的屬性寫法，需要轉換為‘-'連接的屬性寫法    template: '<div >{{name}}Parent</div><child1-component some="1 + 1"></child1-component><child2-component :some="1 + 3"></child2-component>',     components: {      'child1-component': {        // 聲明 props        props: ['some'],        template: '<div>{{some}}</div>',        ready:function(){          console.log(this.some)        }      },      'child2-component': {        // 聲明 props        props: ['some'],        template: '<div>{{some}}</div>',        ready:function(){          console.log(this.some)        }      }    }  });  // 創建根實例1  new Vue({    el: '#example'  });</script>