& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ref
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/vue.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=案北?
& lt;计数器ref=?”@change=癶andleChange祝辞& lt;/counter> & lt; !——2。父组件监听——比;
& lt;计数器ref="两个“@change=癶andleChange祝辞& lt;/counter>
& lt; div的在{{总}}& lt;/div> & lt; !——//子组件向父组件传值——祝辞& lt; !——求和——比;
& lt;/div>
& lt; script>
Vue.component(“计数器”,{
模板:“& lt; div @click=癶andleClick”在{{号码}}& lt;/div>”,
数据:函数(){
返回{
数量:0
}
},
方法:{
handleClick:函数(){
这一点。数量+ +//点击数字自增一
美元。排放(变化)//1。子组件向外触发更改函数,父组件& lt; counter>监听
}
}
})
var vm=new Vue ({
埃尔:“#根”,
数据:{
总:0
},//3 .在父组件里定义handleChange方法
方法:{
handleChange:函数(){
this.total=refs.one美元。数量+ refs.two.number美元
console.log(这一点。refs.one.number美元)
console.log(这一点。refs.two.number美元)
}
}
})//4 .在柜台里定义ref=?”//5。在vue里定义console.log(这一点。refs.one美元)再通过许多获取自增的值//6。通过总获取两数之和
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上这篇vue点击自增和求和的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
