說明:
// 假設login的組件定義如下:
Vue.component('login', {template:'<h1>登錄</h1>',data(){return {msg:'son msg',}},methods(){show(){console.log('調用子組件的方法');}}
})
// 在父元素中使用
<div id="app"><login ref="myLogin"> </login>
</div>// 使用ref ="myLogin" 相當于css選擇器里面的id屬性
// 打開網頁后再控制臺上打印 vm (vm = new Vue({...}))
// 可以看到,有一個myLogin 掛載到$refs上. 于是可以再父元素的方法中使用 this.$refs.myLogin 來使用子組件的數據和方法了!
methods(){getElement(){console.log(this.$refs.myLogin.msg);this.$refs.myLogin.show();}
}
總體代碼如下
<!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"><script src="../../node_modules/vue/dist/vue.js"></script><link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css"><style></style>
</head><body><div id="app"><input type="button" value="獲取元素" @click="getElement" ref="myBtn"><h3 ref="myh3">rel = "myh3"</h3><hr><login ref="myLogin"></login></div><template id="tmp1"><h1>登錄</h1></template><script>var login = {template: '#tmp1',data() {return {msg: 'son msg'}},methods: {show() {console.log("調用子組件的方法");}}}const vm = new Vue({el: '#app',data: {},methods: {getElement() {console.log(this.$refs.myLogin.msg);this.$refs.myLogin.show();}},components: {'login': login}})</script>
</body></html>
