vue----ref属性

最新推荐文章于 2024-01-30 15:12:32 发布

淘淘桃

最新推荐文章于 2024-01-30 15:12:32 发布

阅读量409

点赞数

分类专栏： vue 前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/xiaolisolovely/article/details/131370117

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

# 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>

淘淘桃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue----ref属性

可以写在组件上:在vue中使用 this.$refs.名字拿到[组件]对象，组件属性，方法直接使用即可。可以写在普通标签：在vue中使用 this.$refs.名字拿到dom对象，可以原生操作。# ref属性，vue提供的，写在标签上。
复制链接

扫一扫

专栏目录