1、子组件往父组件传值
点击子组件的值，子组件自增，父组件的值也跟着自增
通过：this.$emit('change')方法向父组件暴露事件，在子组件中引用，可以调用父组件的方法
点击子组件触发click事件，调用子组件的add方法
子组件的add方法触发了父组件的事件，调用了父组件的changeAdd方法
<body> <div id="app"> <!-- 调用父组件的方法--> <number @change="countAdd"></number> <number @change="countAdd"></number> <div>父组件--<span>{{count}}</span></div> </div> <script src="js/vue.js"></script> <script> Vue.component('number',{ template:'<div>子组件--<span @click="add">{{num}}</span></div>', data:function () { return{ num:0 } }, methods:{ add:function () { this.num++ this.$emit('change'.this.num)//向父组件触发事件 } } }) new Vue({ el:'#app', data:{ count:0 }, methods:{ countAdd:function (num) { this.count++ console.log(num) } } }) </script> </body>
2、父组件向子组件单向传值
父组件向子组件传值，存在单向数据流
父组件可以随意向子组件传值，但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
<body> <div id="app"> <!-- 调用父组件的方法--> <number :num2="number2" num3="10"></number> <number :num2="number2" num3="10"></number> </div> <script src="js/vue.js"></script> <script> Vue.component('number',{ //父组件向子组件传值，存在单向数据流 //父组件向子组件可以随意传值 //但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变 props:['num2','num3'], template:'<div>子组件--<span @click="change">{{count}}</span></div>', data:function () { return{ count:this.num2 } }, methods:{ change:function () { this.count = 100 } } }) new Vue({ el:'#app', data:{ number2:99 } }) </script> </body>
2.1 props
props可以是数组
Vue.component('number',{ //父组件向子组件传值，存在单向数据流 //父组件向子组件可以随意传值 //但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变 props:[num2,num3], template:'<div>子组件--<span @click="change">{{count}}</span></div>', data:function () { return{ count:this.num2 } }, methods:{ change:function () { this.count = 100 } } })
也可以是字典
Vue.component('number',{ //父组件向子组件传值，存在单向数据流 //父组件向子组件可以随意传值 //但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变 props:{ 'num2':{ type:[Number,String],//数据类型 default:200,//默认值 required:true//不能和default连用 } }, template:'<div>子组件--<span @click="change">{{count}}</span></div>', data:function () { return{ count:this.num2 } }, methods:{ change:function () { this.count = 100 } } })