vue组件传值
Vue是父子传递的单项数据流---propsprops可以写成数组或者对象Vue.component('ComponentA',{//props:['msg'],//props可以写成作为数组或作为对象props:{msg:{type:String,//声明参数类型default:'title---',//默认值required:true,//需要的参数},name:{type:Object,validator(val){//检查对象的值console.log(val,'------')returnval.a==1}}},template:'
{{msg}}
'})varvm=newVue({el:"#app",data:{msg:'sxq'},template:'
{{msg}}
'})从子组件传递给父组件---$emit通过$emit(自定义事件，参数)传递给父组件methodVue.component('ComponentA',{template:'
click--{{count}} ',data(){return{count:0}},方法：{handleClick(){this.count++this.$emit('test',this.count)}},})varvm=newVue({el:"#app",data:{msg:'sxq'},template:'
{{msg}}
',methods:{handleTest(count){console.log(count)this.msg=count;}},})v-model传值将$emit(customevent,parameter)自定义事件变为输入事件和参数可以使用v-model语法糖传递。Vue.component('ComponentA',{//model:{//可以更改默认值//prop:'value_test',//将默认接收值值更改为自定义值//event:'input_test'//将默认事件输入改为自定义事件//},props:{value:''//默认事件输入，接收值为value},template:'
value--{{value}},count--{{count}} ',data(){return{count:0}},方法:{handleClick(){this.count=this.$props.valuethis.count++this.$emit('input',this.count)}},})varvm=newVue({el:"#app",data:{msg:0},template:'
{{msg}}FADD
'})sync修改父组件的值，因为vue是单项数据流，子组件不能直接改变父组件传过来的参数，所以需要通过sync方法改变父组件的参数$emit('update:customname',modifiedParameters):customnaming.sync="要更改的参数"Vue.component('ComponentA',{props:['msg'],template:'
{{msg}}click
',data(){return{count:0}},methods:{handleClick(){this.count++;this.$emit('update:msg',this.msg+this.count)}},})varvm=newVue({el:"#app",data:{msg:'sxq'},template:'
{{msg}}
'})
