触发的自定义事件要放到注册的组件上
1通过点击:
<div id="app"> <div v-text="money" @click="reduce"></div> <child :m="money" @zdyclick="add"></child> </div> <template id="tempchild"> <div @click="changern">{{m}}</div> </template>
需要三套名字:changern——子组件的事件方法名,zdyclick——父级html上的自定义事件名,桥接父子组件,在子组件方法里触发发布,在父级html里使用,add——父组件的方法名,改变值
let child = { template:"#tempchild", props:{ m:{ type:Number, default:0 } }, methods:{ changern(){ this.$emit('zdyclick',120) } } } let vm = new Vue({ el:'#app', data:{ money:400 }, components:{child}, methods:{ add(val){ this.money+=val }, reduce(){ this.money-=50 } } })
2通过input输入:
<div id="app"> {{money}} <child :m="money" @zdyclick="gai"></child> </div> <template id="tempchild"> <input type="text" :value="m" @input="changer"></input> </template>
let child = { template:"#tempchild", props:{ m:{ type:Number, default:0 } }, methods:{ changer(e){ this.$emit('zdyclick',Number(e.target.value)) } } } let vm = new Vue({ el:"#app", data:{money:400}, components:{child}, methods:{ gai(val){ this.money = val } } })