# ref属性,vue提供的,写在标签上
可以写在普通标签:在vue中使用 this.$refs.名字 拿到dom对象,可以原生操作
可以写在组件上:在vue中使用 this.$refs.名字 拿到[组件]对象,组件属性,方法直接使用即可<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>ref属性放在普通标签上</h1> <input type="text" v-model="username" ref="myinput"> <br> <img src="http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg" alt="" height="300px" ref="myimg"> <h1>ref放在组件上</h1> <hr> <lqz ref="mylqz"></lqz> <hr> <button @click="handleClick">点我执行函数</button> <br> {{username}} </div> </body> <script> var vm = new Vue({ el: '#app', data: { username: '' }, methods: { handleClick() { console.log(this.$refs) // 通过key,取到标签,拿到原生dom,通过dom操作,控制标签 // this.$refs.myinput.value = 'lqz' // this.$refs.myimg.src='https://img2.woyaogexing.com/2021/09/22/3c686eb61fe34696840c478584b73d36!400x400.jpeg' // 放在组件上---》现在在父组件中,能拿到子组件对象,对象中的属性和方法直接用即可 console.log(this.$refs.mylqz) // this.$refs.mylqz.title = 'sb' // this.username=this.$refs.mylqz.title this.$refs.mylqz.handleBack() } }, components: { lqz: { template: ` <div> <button @click="handleBack">后退</button> {{ title }} <button>前进</button> </div>`, data() { return { title: "首页" } }, methods: { handleBack() { alert('后退了') } } } } }) </script> </html>
vue----ref属性
最新推荐文章于 2024-01-30 15:12:32 发布