vue——34- ref 获取DOM元素和组件

最新推荐文章于 2025-05-20 09:20:37 发布

肖ZE

最新推荐文章于 2025-05-20 09:20:37 发布

阅读量613

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/lucky541788/article/details/83097081

vue 专栏收录该内容

74 篇文章

订阅专栏

本文介绍在Vue.js中如何使用ref属性来获取DOM元素和子组件，通过示例展示了如何在父组件中调用子组件的方法以及访问子组件的数据，同时演示了如何通过点击事件触发获取元素的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
html

<div id="app">
    <login ref="mylogin"></login>
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">
    <h3 id="myh3" ref="myh3">hello world!</h3>
</div>

        let login = {
            template: '<h1>hei boy!</h1>',
            data(){
                return{
                    msg:'子组件的数据！'
                }
            },
            methods:{
                show(){
                    console.log('调用了子组件的方法!');
                }
            }
        };

        // 创建 Vue 实例，得到 ViewModel
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getElement() {
                    //console.log(document.getElementById('myh3').innerText);//hello world!

                    //ref 是英文单词 【reference】值类型 和 引用类型
                    console.log(this.$refs.myh3.innerText);//hello world!
                    console.log(this.$refs.mybtn.value);//获取元素
                    console.log(this.$refs.mylogin.msg);//子组件的数据！
                    this.$refs.mylogin.show();//调用了子组件的方法!
                }
            },
            components:{
                login
            }
        });