當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue --- ref属性获取dom元素和子组件的方法

發布時間：2023/12/10 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue --- ref属性获取dom元素和子组件的方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

說明:

// 假設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>

總結

以上是生活随笔為你收集整理的vue --- ref属性获取dom元素和子组件的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：乐优商城笔记
下一篇： webpack --- 使用vue