[TOC] ## 1.父組件通過子組件的屬性向子組件傳遞參數 ### 1-1不聲明傳值的類型 ~~~ <div id="app"> <counter :count="1"></counter> </div> <script> var counter ={ props:['count'], template:"<div>{{count}}</div>" } var vm = new Vue({ el:"#app", components:{ counter } }) </script> ~~~ ### 1-2 聲明傳值的類型 ~~~ var counter ={ props:{ count:Number }, template:"<div>{{count}}</div>" } ~~~ ### 1-3子組件不能直接修改從父組件傳遞過來的參數 ~~~ var counter ={ props:{ count:Number }, methods:{ handleClick(){ //子組件不能直接修改從父組件傳遞過來的參數 this.count++ } }, template:"<div @click='handleClick'>{{count}}</div>" } var vm = new Vue({ el:"#app", components:{ counter } }) ~~~ ### 1-4 子組件修改從父組件傳遞的參數,可以在data中定義一個參數接收 ~~~ var counter ={ props:{ count:Number }, data:function(){ return{ number:this.count } }, methods:{ handleClick(){ this.number++ } }, template:"<div @click='handleClick'>{{number}}</div>" } ~~~