vue父子元件傳參之ref
阿新 • • 發佈：2018-12-27
在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>