在vue中，传参的常用的就父子组件传参，兄弟组件传参。今天我们说的是父子组件传参中的一种方式$ref和ref
首先我们创建一个子组件 并给他添加一个number的值和绑定一个点击事件@click='add()',每次点击加1
Vue.component('counter', { template: `<div @click='add'>{{number}}</div>`, data() { return { number: 0 } }, methods: { add() { this.number++ } }, })
并在我们父组件中调用它
<div id='app'> <div> <counter></counter> <counter></counter> <div>{{total}}</div> </div> </div>
并且在子组件中使用change方法暴露出去
this.$emit('change')
当子组件发生改变的时候像外暴露，我们可以打印出来看看
console.log(this.$emit('change'))
很显然我们得change方法是起作用了的
<counter ref="one" @change='hand'></counter> <counter ref="two" @change='hand'></counter> 我们再通过ref 传入两个参数，并且添加change事件 在父组件中写入 var app = new Vue({ el: '#app', data:{ total:0 }, methods:{ hand(){ this.total = this.$refs.one.number+ this.$refs.two.number } } })
这样我们就完成了父组件的传值
完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src='vue.js'></script> </head> <body> <div id='app'> <counter ref='one' @change='hand'></counter> <counter ref='two' @change='hand'></counter> <div>{{total}}</div> </div> <script> Vue.component('counter',{ template:`<div @click='add'>{{number}}</div>`, data() { return { number:0 } }, methods: { add() { this.number++ this.$emit('change') console.log(this.$emit('change')) } }, }) var app = new Vue({ el:'#app', data:{ total:0 }, methods:{ hand () { this.total = this.$refs.one.number+this.$refs.two.number } } }) </script> </body> </html>