[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>" } ~~~