300字范文 > vue --- ref属性获取dom元素和子组件的方法

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

时间：2022-04-06 09:30:45

说明:

// 假设login的组件定义如下:ponent('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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。