21 Vue获取页面元素

最新推荐文章于 2024-05-13 17:07:12 发布

Civitasv

最新推荐文章于 2024-05-13 17:07:12 发布

阅读量3.7k

点赞数 1

分类专栏： Vue 文章标签： vue ref

本文链接：https://blog.csdn.net/qq_40996400/article/details/104417535

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

Vue获取页面元素

vue中使用ref可以获取Dom元素和组件，如下：

<body>
    <div id="app">
        <input type="button" value="获取元素" @click="getElement">
        <login ref="mylogin"></login>
        <h3 ref="myh3">hello</h3>
    </div>
    <script>
        var login = {
            template: "<h1>登录组件</h1>",
            data() {
                return {
                    msg: "hello component"
                }
            },
        }
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                getElement() {
                    // 通过ref获取Dom元素
                    console.log(this.$refs.myh3.innerText);
                    // 通过ref获取组件
                    console.log(this.$refs.mylogin.msg);
                }
            },
            components: {
                login
            }
        })
    </script>
</body>