vue7:父组件向子组件传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <number num3="10"></number> <!-- 如果定义了default,可以不传num2--> <number num2='9' num3="10"></number> <!-- 如果<number :num2='9' num3="10"></number>,那么传过来的就是数值类型了--> <!-- 就是num前面加冒号,因为v-bind的时候就把它转换为一个对象了--> <number :num2=number2 num3="10"></number> </div> <script src="js/vue.js"></script> <script> Vue.component('number',{ //父组件向子组件传值,存在单项数据流 //如果子组件修改父组件传递过来的值,会回传给父组件,当其他组件影响了父组件,会 //影响其他子组件,所以要在子组件定义自己的值,引用自己的值 // props:['num2','num3'], //这是接收父组件传过来的值 props:{ 'num2':{ type:[Number], default:'200', required:true // 是否必传,不能跟default连用 } }, //prop还可以接收字典格式,传过来值为key,还可以有default值,还可以进行判断 //在<number num3="10"></number>不传num2值的情况下,默认200 //还可以定义传过来的值的类型 template:'<div>子组件<span @click="add">{{count}}</span></div>', data:function () { return{ count:this.num2 } }, methods:{ add:function () { this.count=100 } } }) new Vue({ el:"#app", data:{ number2:99 }, }) </script> </body> </html>