Vue中ref属性获取DOM元素和子组件的内容

Vue.jpeg

Vue中ref属性获取DOM元素和子组件内容

-$refs是Vue实例对象的一个属性，它也是一个对象

• 我们在html元素或者自定义的组件中添加ref属性绑定一个自定义的key,通过Vue对象实例来访问DOM元素

比如：在下面的例子中，我们在 ref="myh3"自定义一个myh3的可以，来通过this.$resf.myh3来访问这个html元素

<div id="app">
    <input type="button" value="获取元素" @click="getDom">
    <!-- ref绑定一个自定义的key，通过Vue实例对象获取到这个组件 -->
    <h3 ref="myh3">今天，天气很蜣螂</h3>

    <login ref="mylogin"></login>

</div>


<script>
    

    var login = {
        data:function(){

            return {
                'msg':"这是一个私有的属性"
            }
        },
        template:"<h1>这是一个子组件--登录</h1>",
        methods:{
            show(){
                console.log("子组件的方法");
            }
        }
    }

   var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            //es6函数语法
            getDom(){
                console.log(this.$refs.myh3.innerText);
                console.log(this.$refs.mylogin.msg);
                this.$refs.mylogin.show()
            }
        },
        components:{

            login:login

        }

    })

</script>

喜欢文章的👍一下，谢谢，有想学习[web]可以私聊我。

image.png